深入理解之css中的border属性
1、 border-width:不支持不百分比
1）受本身的使用场景决定。
例子：左边为手机，右边为显示器，但是他们边框的宽度是差不多的，不会因为设备大就让边框宽度变大。
2、 border-width:还支持关键字（thin=1px medium=3px thick=5px）
但是border中最常用的却是thin 为什么他的默认属性为3px? border-style:double的默认属性为三像素。
3、border-style:double
1)border-style: solid; 表示实线 ，很熟悉，pass
2)border-style: dashed; 虚线，挺熟，pass
3）border-style: dotted ; 点线， 不熟
在Chrome/FireFox:中是小方形
在IE中是小圆形 我们可以用这个属性实现圆角属性。
4）border-style:double; 双线，非常不熟。
.
分别表示（左 中间 右）的大小 双线宽度相等 中间宽度（+-1）
双线布局的兼容性非常好，在平时有许多可以应用的地方
例子1:绘制图形，实现下拉列表的三等分
5）border-inset ; 内凹 大眼瞪小眼；
6）border-outset: 外凸， 大眼瞪小眼
7）border-style: groove; 沟槽
只需要了解
4 、border-color 与 color
1）当没有对变框指定颜色的时候，变框的颜色就是字体的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>color</title>
<style>
.box{
border: 10px solid;
color: red;
}
</style>
</head>
<body>
<div class="box">我的颜色是</div>
</body>
</html>说明：box-shadow, text-shadow也是和上面一样，默认颜色也为字体的颜色
2）这个特性有什么用
5、border与background的定位
background定位的局限：css2.1中的定位只能相对于左上角数值定位，不能相对右下
例子1：我们希望不论怎么改变边框 里面的图形都距离左边都是 固定像素。
只需设置为：backgrouond-position: 50px 40px
例子2：如果我们希望相对于右边的距离是固定的呢
方法1：用border 设置在右边设置一个50px的透明边框
borde-right:50px solid transparent;
background-position:100% 40px;6、用border 构建图形
上一篇： 微信粉丝经营之快速打造一个5万粉丝的微信公众号技巧
下一篇： CSS深入理解之float浮动