极致CSS(9)-背景和边框

首先我们还是从边框开始, 边框的概念还是很好理解的, 就是盒子的边. 但是涉及到三个属性, 除了border-width之外, 还有border-color和border-style. 加上下左右四个方向的组合. border-width的默认值是medium, 也就是3px, 但是border-style 默认值是 none, 所以元素默认不会显示边框. 实际场景中我们多数是使用实线纯色边框, 并且多数时候都会使用简写同时设置三个属性, 类似border: 2px solid #F1F1F1, 先后顺序其实是没有限制的, 但是出于规范和习惯, 一般都是按width style color的顺序书写. border-color的默认值是currentcolor, 也就是取元素color属性的值, 和元素字体的颜色一样, 也可以设置为transparent透明边框.

border的理解和使用一般还是挺简单的, 设计师一般也不会制作过于复杂的边框, 照着设计定好的宽度和色值书写即可. 需要注意的是首先, border会影响到width属性的计算规则, 由于box-sizing的默认值是content-box, 也就是border的宽度会加在width和height的外面, 使得元素视觉尺寸变大. 此时为了方便可以直接设置box-sizing: border-box, 避免手工计算尺寸. 另外, border-width不支持百分比值.

其他几种border-style可以用于绘制图形. 比如border-style: dashed可以绘制虚线. border-style: dotted可以绘制一系列方点或圆点(根据浏览器不同). 不过更复杂的图形现在通常都是用图片或svg实现. 所以我们也不过度关注了.

边框圆角的需求在设计稿中也是经常见到, 通过border-radius属性实现, 也可以单独设置四个角的圆角半径, 如果设置的半径超过了元素尺寸的50%, 元素将表现为圆形. 另外有一个细节, 圆角是绘制在边框的外边缘上, 内部是没有圆角效果的.

CSS3也增加了border-image属性, 可以在边框上绘制图形, 由于边框的使用主要是出于装饰, 边框图形也主要是为了更多美化界面, 如果涉及到需要复杂装饰的场景, 可以考虑使用, 现在的兼容性应该也可以接受了, 不过我也还没有实际使用过, 以后有用到再补充吧.

边框还有一些应用是绘制三角形等简单图形, 主要是利用边框的折角和颜色, 视觉上拼出所需要的图形, 有时会遇到, 不过现在也有了transform或者linear-gradient等其他实现方式, 如果遇到这种场景, 可以比较一下, 选择最简单的方式.

然后我们看一下padding. 一般介绍盒模型时会把margin和padding对照, 称为内边距, 不过我感觉, padding和border的关系更近, 可以理解为内边框. padding出现在边框之内, content之外, 默认值是0, 只可以设置宽度也就是长度值, 没有style和color的设置, 而且宽度的百分比全都是相对于包含块的宽度计算. padding本身也不复杂, 同样是由于box-sizing的问题, 需要注意对宽度计算的影响. 为了简单, 我的一般原则是不用padding, 如果偶尔用到, 记得考虑box-sizing.

背景

之后我们看background, 如果说定位会在页面之上创建层, background就是在页面之下创建层. 最基础的是background-color设置背景色, 默认是transparent, 透明背景, 也可以设置background-image, 背景图片, 同时设置的话, 图片会显示在背景颜色之上. CSS3之后, 背景图片可以设置多个, 用逗号隔开, 但是背景色依然只有一个, 要实现多个背景色, 可以使用gradient, 但是gradient的类型是image, 所以也要通过background-image来设置.

由于在页面上显示图片是一种常见的需求, 使用img标签显示图片需要更改html, 所以background-image就成为在CSS中设置图片的主要方式.(伪元素也可以用来显示图片, 但是样式不好控制, 基本不会用到) background的大部分属性都是在设置图片的显示方式. 首先是图片的位置和大小, 由background-position和background-size确定, background-position的默认值是0, 也就是从左上角开始摆放, background-size默认是auto, 按图片原始尺寸显示. 当然由于是背景图片, 不可能超过所在元素的范围显示, 所以有一个属性background-clip可以设置背景显示的范围, 默认是border-box, 也就是背景不超过边框的外边界. 也可以设置为padding-box或content-box, 比较好理解. 但是还有一个background-origin属性, 规定了背景计算参照的起始位置, 取值也是这三个box, 默认是padding-box, 其实他们都是为了确定图片显示的计算方式, 实际效果一试便知, 而且用到的机会也不是很多, 除非有复杂的背景定位需求.

还有两个background属性, background-repeat和background-attachment, 是网页技术早期保留下来的, 现代基本很少会用到. 特别是background-repeat默认是repeat非常心烦, 基本每次都需要重置, 属性名又长, 所以我在全局设置了background-repeat: no-repeat; background-size: 100%; background-position: center;, 因为大部分时候, 背景图片都是和元素等尺寸居中显示的.

装饰

如果把padding理解为内边框, 那么outline就可以理解为外边框. outline的语法和border类似, 但是不能单独设置每条边的样式, 另外, outline不能表现出元素的圆角, 由于绘制在margin区域, 也不能用于扩大点击区域, 但是其不影响布局的特性, 使得他用来绘制蒙层比较合适, 尤其是需要镂空效果的蒙层, 可以通过设置一个宽度很大的outline实现. 但是现在outline还没法跟随元素的圆角, 所以在圆角元素上需要用box-shadow制作镂空蒙层. CSS3增加了一个outline-offset属性, 可以改变outline绘制的位置, 如果遇到复杂的多重边框, 可以尝试用一下.

然后我们就说到了box-shadow. 从本意上来说, 这个属性的作用是给元素添加阴影, 但是这个属性设计的非常强大, 甚至可以生成任意图形, 例如shadow-image. 由于语法太多, 实际应用少, 我们就不过多介绍了, 可以查阅MDN文档, 也有相应的可视化生成工具生成box-shadow代码. 我们上面说到的用box-shadow生成镂空蒙层, 用到的是其中一种比较完整的写法box-shadow: 0 0 0 100vh rgba(0,0,0,.7);, box-shadow生成的阴影会跟随元素的圆角效果, 但是如果阴影尺寸过大, 阴影外边缘的圆角半径可能和元素自身的圆角半径相差较大, 如果要实现内外同等半径的投影, 还是需要嵌套多级元素分别设置圆角.