CSS深入理解之border

总结自慕课网：https://www.imooc.com/learn/755

• border-width为什么不支持百分比

    视频中作者的理解是：手掌大小iPhone手机边框和两个人脸大小的显示器的边框是一样大的，不存在说因为尺寸变大而边框变大。

    个人理解：width属性具有继承性，假设父元素100px；子元素设置50%，则为50px；而border-width不具有继承性，如果使用百分比，浏览器解析时应该向谁作为参考对象呢，所以只能用指定大小来确定。

    类似不支持百分比的有：outline,border-shadow,text-shadow

    border-width还支持关键字：thin(1px)；medium(3px)（默认值）；thick(5px)

 

• 各种border-style类型

border-style:solid;    //实线

border-style:dashed;    //虚线

不同浏览器虚线的实色区域宽高比不同： Chrome/FireFox:(3:1);    IE:(2:1);

border-style:dotted;    //点线

不同浏览器表现有差异：Chrome/FireFox:小方;     IE:圆;

border-style:double;    //双线

三条杠的图案就可以通过一个div和border来实现

border-style:inset;    //内凹

border-style:outset;    //外凸

border-style:ridge;    //山脊

border-style:groove;    //沟槽

border-color默认颜色就是color

 border-color默认颜色就是color

当border-color为指定颜色时，color设置什么颜色border-color就会是什么颜色，类似的还有box-shadow,text-shadow等

实际应用：鼠标经过时边框和中间十字均变色

 

 css2.1background的定位只能相对于左上角数值定位，不行相对右下

那么如果要在css2.1实现相对有边缘定位呢

 三角形的实现网上有很多教程了，在此就不详细说了，主要原理就是讲宽高设置为0；然后将部分border的颜色设置成透明

再设置好border的宽度，即可实现各种形状的三角形。

 

drop-shadow滤镜还可以给元素或图片非透明区域添加投影。 
原理如下： 
对于背景透明的 png 小图片而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图片了吗？ 
然后，我们把原始图片隐藏在容器外面，投影图片在容器中间，给人的感觉就是换了颜色的图片。

但是在Chrome浏览器下页面中不可见元素的drop-shadow也是不可见；但是如下图

等宽布局 ；缺点不支持百分比宽度

 

• border与color

• border与background定位

• border与三角等图形构建

•  border与透明边框

• border在布局中的应用