半透明边框
默认情况下，背景会延伸到边框所在的区域的下层。如果要给一个容器添加半透明白色边框，并用白色背景，这样写的话是看不到半透明效果的，white背景会从半透明边框下透出来：border:10px solid hsla(0,0%,100%,.5);background: white;
可以通过background-clip: padding-box;调整，background-clip的默认值是border-box，背景会被border的外沿切掉。改成padding-box之后，就会用内边距padding的外沿把背景切掉。
多重边框
box-shadow让投影模拟边框。支持逗号分隔，可以创建任意数量的投影。 
前三个值均为0，设置spread扩张半径，就是边框的尺寸。
投影是层层叠加的，第一层投影在最顶层，以此类推。投影模拟出的边框，并不会影响布局，不受box-sizing影响，（可以用额外添加的padding/margin来给边框留出空间）。边框出现在元素外圈，不影响鼠标事件。如果需要鼠标事件，可以把投影改成inset（内投影），再额外添加padding腾出空间。这种方法的缺陷是边框只能是实线。
描边（轮廓）
只需要两层边框，就先设置border，再添加outline
outline:接受颜色、样式和宽度。样式可以取： 
outline-offset 可以接受负值，创建简单的缝边效果。
background:green;
outline: 5px dashed deeppink;
outline-offset:-10px; 灵活的背景定位
背景定位background-position 是以padding box为基准的，可以用background-origin 修改。如果改成background-position: content-box; 那么定位时的偏移量可以随着padding变化而变化。
函数calc()，calc是单词calculate(计算)的缩写，calc(100% - 20px);
使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格。
边框内圆角
用outline 描边并不能实现圆角，但box-shadow 有圆角，可以两者结合，box-shadow 会出现在下层，填满空隙。
条纹背景
用线性渐变linear-gradient
等宽条纹：
background:linear-gradient(#fb2 50%,#58a 50%);
background-size: 100% 30px;不等宽条纹，修改后一项的百分比，或者设为0。也可以再加颜色。
垂直条纹：添加to right；
background:linear-gradient(to right, #fb2 50%,#58a 50%);斜向条纹：角度直接可以改。
background: repeating-linear-gradient(45deg,#fb3,#fb3 15px,#58a,#58a 30px);网格/棋盘背景
伪随机背景
创建间距不同的条纹背景，平铺。
把平铺间距最大的贴片安排在最顶层。遵循“蝉原则”，选择质数作为每个贴片的尺寸，实现总贴片尺寸最大化。