《CSS揭秘》-背景与边框

1.给一个容器设置一层白色背景和一道半透明白色边框。

思路：实际是设置的背景会延伸到边框所在的区域的下层，可以通过background-clip属性调整背景的默认行为。

background-clip 属性：背景的绘制区域

值	描述
border-box	背景被裁剪到边框盒
padding-box	背景被裁剪到内边距框
content-box	背景被裁剪到内容框

border: 20px solid hsla(0, 0%, 100%, .5);
background: #fff;
background-clip: padding-box;

2. 多重边框实现

box-shadow 方案

思路：利用box-shadow的第四个参数（扩张半径）指定正负值，让投影面积加大或减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的投影像一道实线边框。优点：可以获得更多层边框；贴合border-radius属性产生圆角。缺点：只能描绘直线一种样式。

box-shadow 属性：向框添加一个或多个阴影。支持逗号分割语法，我们可以创建任意数量的投影。box-shadow是层层叠加的，第一层投影位于最顶层，依次类推。因此，需要按规律调整扩张半径。

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影 (outset) 改为内部阴影

box-shadow: h-shadow v-shadow blur spread color inset;

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0, 0, 0, .5);

注意：

1. 投影的行为不会影响布局，也不会收到box-sizing属性的影响。不过可以通过内边距或外边距来额外模拟出边框所需要占据的空间。
2. 投影出现在元素的外圈，不会响应鼠标事件，比如悬停或点击。你可以给box-shadow属性加上inset关键字，使投影绘制在元素的内圈，此时需要增加额外的内边距来腾出足够的空隙。

outline 方案

思路：只需要两层边框，可以先设置一层常规边框，再加上outline（描边）属性产生外层边框。优点：边框样式十分灵活。缺点：只适用于双层边框的场景；边框不一定会贴合border-radius属性产生的圆角。

outline属性：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

值	描述
outline-color	规定边框的颜色
outline-style	规定边框的样式
outline-width	规定边框的宽度

background: yellowgreen;
outline: 5px solid deeppink;

设置box-radius值效果：

通过设置outline-offset属性控制它与元素边缘之间的距离

background: #485152;
outline: 1px dashed #fff;
outline-offset: -10px;

3. 针对容器某个角对背景图片做偏移定位

background-position 的扩展语法方案