shkd
snks
一、背景与边
1、半途明边框
当页面中有div，css样式如下时：
width: 100px;
height: 100px;
/*border: 20px solid hsla(0, 0%, 100%, .5);*/
border: 20px solid rgba(256, 256, 256, .5);
background: #809328;
页面显示如图1：
我们通过使用了一个半透明边框，可以看出，背景会延伸到边框所在的区域下层。即使我们使用了不透明的实色边框，也不会改变这个事实。但是，我们可以通过background-clip属性，来调整上述默认行为带来的不便。
background-clip的默认值是border-box，意味着背景会被元素边框的外边框裁切掉，它还有两个取值：padding-box 和 content-box。下面我们使用代码来尝试一下：
width: 100px;
height: 100px;
border: 20px solid rgba(11, 11, 11, .5);
background: #809328;
padding: 10px;
background-clip: padding-box;
/*background-clip: content-box;*/
为了区别两个特性，我们把div增加了padding值，左面的div background-clip 为padding-box，右面的div取值content-box，效果如图2：
那么，思考，下图3这样容器中一层白色背景和一道半透明边框的图片，如何形成？
2、多重边框
我们都使用过box-shadow
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色 将外部阴影 (outset) 改为内部阴影;
并且，可以使用逗号分隔，因此可以创建任意数量的投影。我们利用这个特性，可以做出多重边框的效果，如下图4：
需要注意的是：投影和边框有所区别，因为它不会影响布局，而且外部shadow不会响应鼠标事件。
在某些情况下可能只需要两层边框，那就可以先设置一层常规边框，再加上outline（描边）属性来产生外层的边框。描边的另一个好处是，可以通过outline-offset设置它和元素边缘的间距。可实现下图5效果：
3、灵活的背景定位
如果我们想把一个图片当做背景放在小div的右下角，且向左偏移20px，向上偏移10px，我们要计算出距离div左上角的距离，这样很不方便。css3中，background-position给出了扩展：
background：url(cute.png) no-repeat #58a;
background-position: right 20px bottom 10px;
此外，还需提供一个回退方案，供不支持该语法的浏览器看起来不会很奇怪:
background：url(cute.png) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
在给背景图片设置距离某个角偏移时，有一种特殊情况：偏移量与容器的内边距一致，如果采用上面的语法：
padding: 10px;
background：url(cute.png) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
但是如果内边距改变的话，需要改变三个值。每个盒子都包括三个矩形框：border-box、padding-box（内边距的外沿框）、content-box。默认情况下，background-position 以 padding-box 为准，我们可以通过设置background-origin来改变它，改善后的代码如下：
padding: 10px;
background：url(cute.png) no-repeat bottom right #58a;
background-origin: content-box;
也可以使用calc（）函数来表示：
background：url(cute.png) no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
4、边框内圆角
要实现下面图6效果:
只需要以下样式：
background: tan;
border-radius: 20px;
box-shadow: 0 0 0 15px #655;
outline: 15px solid #655;
5、条纹背景
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 50px;
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 50px;
为了避免每次改动条纹宽度时都需要修改两个数字，我们可以从规范找到捷径：
如果某个色标到位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。
因此，上面代码可以改为：
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 50px;
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100px;
33.3%表示0-0.33是黄色，0表示0.33蓝色开始，66.6表示蓝色结束，0表示66.6绿色开始
竖直条纹：
background: linear-gradient(to right, #fb3 50%, #58a 0);
斜向条纹：
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 50px 50px;
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 50px 50px;
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
6、复杂的背景图案
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0), linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
background: #58a;
background-image: linear-gradient(90deg, white 1px, transparent 0), linear-gradient(white 1px, transparent 0);
background-size: 30px 30px;
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background: #655;
background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
