CSS3边框

currentColor 等于color,

background-size:cover这个属性可以做到不管容器的尺寸如何变化，背景图片都完整地铺满一个容器。

我们可以通过 background-clip 属性来调整上述默认行为所带来的不便。这个属性的初始值是 border-box，意味着背景会被元素的 border box（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。

 

background-position是以padding box 为准的，这样边框才不会遮住背景图片。background-origin,可以改变相对路径。默认值是padding-box。如果把它的值改成content-box，我们在background-position属性中使用的边角关键字将会以内容的边缘作为基准。

 

calc()解决方案。在calc()函数内部的-和+运算符的两侧各加一个空白符，否则会产生解析错误！这个规则是为了向前兼容。calc()函数允许我们执行100%-20px这种运算。

 

垂直线性渐:background:linear-gradient(#fb3,#58a);调节色标距离:background:linear-gradient(#fb3 20%,#58a 80%);

因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样对待它，而且还可以通过background-size来调整其尺寸。

我们可以创建不等宽的条纹，background:linear-gradient(#fb3 30%,#58 30%);background-size:100% 30px;

 

如果某个色标的位置比整个列表中在它之前的色标位置值都要小，该色标的位置会被设置为它前面所有色标值的最大值。

 

垂直条纹：我们需要在开头加上一个额外的参数来制定渐变的方向。水平的默认是to bottom。而垂直的参数就是to right。

 

linear-gradient()和radial-gradient()还各有一个循环式的加强版：repeating-linear-gradient()和repeating-radial-gradient()。它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景。background:repeating-linear-gradient(45deg, #fb3,#58a 30px);

 

实现网格布局。将多个渐变图案组合起来。让它们透过彼此的透明区域显现时，就出出线网格布局。background-image:linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);在某些情况下，调整网格中每个格子的大小，而网格线条的粗细同时保持固定。可以使用长度而不是百分比作为色标。

 

波点，径向渐变。允许我们创建圆形、椭圆。

 

棋盘图案在很多次场景下都会用到。CSS实现代码要敲很多，转到SVG方案更方便。有人说CSS可以省掉HTTP请求，对于现代浏览器来说，我们可以把SVG文件以data URI的方式内嵌到样式表中，甚至不需要用base64或URLencode来对其编码。

 

tip:如果出于可读性的考虑，需要把一句CSS代码打断为多行，只需要用反斜杠（\）来转义每行末尾的换行就可以了。