《CSS世界》读书笔记（十四）

<!--  《CSS世界》张鑫旭著 -->

功勋卓越的 border 属性

border-width 不支持百分比值

border-style 类型

border-style 默认值是none；多出现在重置边框样式的时候，渲染性能最高的写法是：

div {

    border: 1px solid;

    border-bottom: 0 none;

}

border-style: dashed

虚线边框。虚线颜色区的宽高比以及颜色区和透明区的宽度比例在不同浏览器下是有差异的。例如，在 Chrome 和 Firefox 浏览器下，颜色区的宽高比是3:1，颜色区和透明区的宽度比例是1:1；而 IE 浏览器则是另外的数据，颜色区的宽高比是2:1，颜色区和透明区的宽度比例也是2:1

border-style: dotted

border-style: double

双线边框，顾名思义，即两根线且为实线。表现规则：双线宽度永远相等，中间间隔±1。

border-color 和 color

border-color 默认颜色是 color 色值。具体来讲，就是当没有指定 border-color 颜色值的时候，会使用当前元素的 color 计算值作为边框色。

具有类似特性的 CSS 属性还有 outline、box-shadow 和 text-shadow等。

border 与透明边框技巧

虽然 color: transparent 在 IE9 以上版本的浏览器才支持，但是 border-color: transparent 在IE7浏览器就开始支持了。

1.右下方 background 定位的技巧

在 CSS3 新世界还没到来的时候，background 定位有一个比较大的局限性，就是只能相对于左上角数值定位，不能相对右下角。这种特性有时候会给我们的工作带来一点儿麻烦。

假设现在有一个宽度不定的元素，我们需要在局里右边缘50像素的位置设置一个背景图片，此时 background 属性就遭遇尴尬了：由于宽度不固定，所以无法通过设定具体数值来实现我们想要的效果，因为 background 是相对左上角定位的，我们的需求是右侧定位。

要实现上面的需求，方法很多。其中一种方法就是使用透明边框，如下 CSS 代码：

.box {
    border-right: 50px solid transparent;
    background-position: 100% 50%;
}

此时，对 50px 的间距我们使用 transparent 边框表示。并且，默认 background 背景图片是相对于 padding box 定位的，也就是说，background-posiiton: 100% 的位置计算默认是不会把 border-width 计算在内的。

2.三角等图形绘制

即使在移动端，使用 CSS 的 border 属性绘制三角形等图形仍是性价比最高的方式。例如，一个朝下的等腰直角三角形，直接用：

div {
    width: 0;
    border: 10px solid;
    border-color: #f30 transparent transaprent;
}