CSS 深入理解之 border 【笔记】

william 发布于2019-08-30 15:52 / 1159人阅读

摘要：本文是对慕课网张鑫旭的课程深入理解之的学习笔记，并结合了一些个人理解。

本文是对慕课网张鑫旭的课程《CSS 深入理解之 border》的学习笔记，并结合了一些个人理解。

border-width 不支持百分比

border-width 不支持百分比单位，原因如下：

在实际设计中，边框一般是固定大小的，不会随着盒子宽度的增加而增加

margin 和 padding 为百分比单位时，是相对于 containing block 的宽度而言的

边框相对于盒子宽度来说是很小的，如果像 padding、margin 那样支持百分比单位，那么占的百分比数值也将会很小

同样不支持百分比的还有 outline, box-shadow, text-shadow ...

border-width 支持的关键字有（数值对 IE8+ 有效, chrome 等不太一样，因为标准对具体实现没有规定）

thin: 1px

medium: 3px 默认值

为什么默认值是 3px 呢？因为border-style: double 至少要 3px 才有效果

thick: 5px

border-style

solid

dashed

chrome/firefox 和 IE 的虚线比例不一致

dotted

chrome/firefox 的点是方的，IE 的是圆的

可以用这个来实现 IE7、8下的圆角效果（链接请用 IE 打开）

double

双线

双线宽度永远相等，中间空白宽度 ±1

可用于实现 menu 三道杠效果，上 border-style 是 double，下 border-style 是 solid。

兼容性好，不需要用伪元素

inset、outset、groove、ridge

不好看，一般不用

兼容性差

border-color 与 color

当没有指定 border-color 的时候，会使用 color 作为边框色

当需要边框颜色和内容颜色一致时可以简化代码

类似的还有 box-shadow, text-shadow ...

border 与 background 定位

background 定位的局限：只能相对于容器的左上角定位，不能相对于右侧定位

CSS2 是这样，CSS3 支持（IE9+）

解决办法：

多层标签嵌套

使用 border

border-right: 50px solid transparent;
background: 100% 40px;

border 与图形构建

border-style

dotted：IE7、8圆角

double：三道杠图标

solid：三角、梯形

通过border-color: transparent

下拉按钮、对话框、三角叠加形成更复杂图形

用梯形拼合形成圆角效果，兼容性好

border 与透明边框

支持 IE7+，兼容性好

使用

background 右侧定位

三角图形

增加单选/复选响应区域大小

用盒阴影实现边框，原先的 border 变成透明来增加点击区域

扩大渲染区域，drop-shadow

border 在布局中的应用

border 与等高布局

用 border 模拟一栏，将内容移至 border 内

缺点：不支持百分比宽度

GPU云服务器云服务器深入理解webrtc之aec 深入理解系列深入理解linux 深入理解webrtc

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

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

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

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

he_xd 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之margin

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

stefan 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之padding

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

learn_shifeng 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之z-index

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

Steven 2019-08-30 15:54 评论0 收藏0
css揭秘笔记——形状

摘要：把改成，就变成了这样实现边框内圆角多重边框还有下实现多重背景为某一层背景单独设置类似这样的属性等等。裁切路径方案这种方案，当内边距不够宽时，会裁切掉文本。自适应的椭圆（border-radius的用法）单独指定水平和垂直半径长宽固定的元素，可以通过指定宽高的一半，变为椭圆形，格式为两个值用/分开。 width: 100px; height: 80px; border-radi...

dantezhao 2019-08-29 13:47 评论0 收藏0