资讯专栏INFORMATION COLUMN

【学习笔记】CSS深入理解之border

he_xd / 3259人阅读

摘要:张鑫旭的深入理解之学习笔记不支持百分比,原因是边框本身具有宽度固定的意义,不同设备的边框不会因设备宽度而等比改变。可以利用该特性实现图标变色的效果与定位不计算区域,只限于以内的盒子。

张鑫旭的CSS深入理解之border学习笔记
border-width

border-width不支持百分比,原因是边框本身具有宽度固定的意义,不同设备的边框不会因设备宽度而等比改变。因此从语义上来说,边框支持百分比毫无意义。text-shadow/box-shadow/outline也有相同语义

border-width的默认标识为medium,因为border-style为double时支持的最小宽度为3px

border-style

solid - 一条实线

dashed - 在Chrome/Firefox 和 IE 上渲染效果有宽高比区别,适合单纯作为虚线框使用

dotted - 在Chrome/Firefox上实线部分以方格图案展示,IE上实线部分以圆展现。可利用该特性在IE8上实现圆角

double - 由两条实线和一条虚线组成,实线宽度相等,虚线宽度为总宽度-实线宽度*2。可利用该特性实现菜单效果

https://codepen.io/curlywater...

其他3D效果兼容性不佳,谨慎使用

border-color

在未设置border-color时,color作为边框色,border-color不会继承。text-shadow/box-shadow类似。

可以利用该特性实现图标hover变色的效果

https://codepen.io/curlywater...

border与background定位

background-position不计算border区域,只限于padding以内的盒子。可以利用这一特性实现背景图片距离容器右侧定位

border与三角等图形构建

利用border相交会产生边缘等分的内嵌效果,可以实现三角、梯形等图形构建

https://codepen.io/curlywater...

常见的应用

https://codepen.io/curlywater...

border与透明边框

边框使用box-shadow,原先border变透明来增加点击区域
使用背景透明的图片+drop-shadow实现图标颜色修改:相对定位向左偏移,设置右边框,外部容器使用overflow:hidden隐藏原始图标

border与布局

border实现等高布局

局限:不支持百分比,只可左边区域根据右边区域变化

https://codepen.io/curlywater...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117038.html

相关文章

  • CSS 深入理解 border笔记

    摘要:本文是对慕课网张鑫旭的课程深入理解之的学习笔记,并结合了一些个人理解。 本文是对慕课网张鑫旭的课程《CSS 深入理解之 border》的学习笔记,并结合了一些个人理解。 border-width 不支持百分比 border-width 不支持百分比单位,原因如下: 在实际设计中,边框一般是固定大小的,不会随着盒子宽度的增加而增加 margin 和 padding 为百分比单位时,...

    william 评论0 收藏0
  • 学习笔记CSS深入理解margin

    摘要:张鑫旭的深入理解之学习笔记与容器的尺寸可视尺寸对于没有设定的块元素,可改变元素水平方向的可视尺寸占据尺寸对于元素,可改变元素水平垂直方向的占据尺寸与百分比单位普通元素的百分比都是相对于容器的宽度计算的绝对定位元素的百分比是相对于包含块的宽 张鑫旭的CSS深入理解之margin学习笔记 margin与容器的尺寸 可视尺寸:对于没有设定width的块元素,margin可改变元素水平方向...

    stefan 评论0 收藏0
  • 学习笔记CSS深入理解padding

    摘要:张鑫旭的深入理解之学习笔记与容器的尺寸元素值过大,一定影响元素尺寸为定值,会影响元素尺寸为或者为,同时值没有暴走,不影响元素尺寸元素水平影响尺寸,垂直不影响尺寸,但是会影响占据空间会显示背景色负值与百分比单位不支持负值百分比相对于自身宽 张鑫旭的CSS深入理解之padding学习笔记 padding与容器的尺寸 block元素 padding值过大,一定影响元素尺寸 width为定...

    learn_shifeng 评论0 收藏0
  • 学习笔记CSS深入理解z-index

    摘要:张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级,离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。 张鑫旭的CSS深入理解之z-index学习笔记 层叠上下文 什么是层叠上下文?在z轴上延伸出一个层级,离父级层叠上下文的顶部更近。 如何产生层叠上下文? 根元素具有根层叠上下文 z-index不为auto的定位元素 一个 z-index 值不为 ...

    Steven 评论0 收藏0
  • 前端知识点整理

    摘要:难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和,初中级前端就业形势不容乐观。整个系列的文章大概有篇左右,从我是如何成为一个前端工程师,到各种前端框架的知识。 为什么 call 比 apply 快? 这是一个非常有意思的问题。 作者会在参数为3个(包含3)以内时,优先使用 call 方法进行事件的处理。而当参数过多(多余3个)时,才考虑使用 apply 方法。 这个的原因...

    Lowky 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<