css揭秘 - 背景与边框
半透明边框
RGBA/HSLA颜色
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
border: 10px solid hsla(0,0%,100%,0.5);
background: white;
background-clip: padding-box; // 浏览器会用内边距的外沿来把背景裁切掉
多重边框
box-shadow接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实现边框。
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
不过 box-shadow 的好处在于， 它支持逗号分隔语法， 我们可以创建任意数量的投影。因此， 我们可以非常轻松地在上面的示例中再加上一道 deeppink 颜色的“边框”
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
注：box-shadow是层层叠加的，第一层投影位于最顶层，以此类推，因此需要按照此规律调整扩张半径。比如说， 在前面的代码中， 我们想在外圈再加一道 5px 的外框， 那就需要指定扩张半径的值15px(10px+5px)
加投影的box-shadow
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
outline（描边）方案
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
可以通过 outline-offset 属性来控制它跟元素边缘之间的间距， 这个属性甚至可以接受负值。只适用于双层“边框”的场景（若多层边框则使用box-shadow）,边框不一定会贴合 border-radius 属性产生的圆角。
background: yellowgreen;
border: 10px solid #655;
border-radius: 10px;
outline: 1px dashed white;
outline-offset: -5px;
灵活的背景定位
background-position的扩展
允许指定背景图片距离任意角的偏移量，只要在偏移量前面指定关键字。跟右侧保持20px的偏移量同时跟底部保持10px的偏移量如下：
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
回退方案
background: url(code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
background-origin方案
将background-origin设置为content-box，会使偏移量跟padding的值相同。若有不同的，可以配合background-position的扩展语法来设置额外的偏移量。
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */
background-origin: content-box;
calc()方案
按照左上角思路来想，需要计算对左上角的偏移量，可以使用calc()计算相对于左上角的偏移量。
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
注：请不要忘记在calc()函数内部的 - 和 + 运算符的两侧各加一个空白符，否则会产生解析错误！
边框内圆角
难题
一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状。用两个元素可以实现此效果。
<div class="something-meaningful"><div>
I have a nice subtle inner rounding,
don't I look pretty?
</div></div>
.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}
将box-shadow和outline结合使用，可以实现边框内圆角的效果。box-shadow的扩张半径要比描边的宽度值小，但同时又要比(根号2-1)r大(r表示border-radius)
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
条纹背景
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
// to right 或者 90deg
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;
background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
复杂的背景图案
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;
background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
波点的mixin代码 -- SCSS
@mixin polka($size, $dot, $base, $accent) {
background: $base;
background-image:
radial-gradient($accent $dot, transparent 0),
radial-gradient($accent $dot, transparent 0);
background-size: $size $size;
background-position: 0 0, $size/2 $size/2;
}
// 调用
@include polka(30px, 30%, #655, tan);
棋盘
background: #eee;
background-image:
linear-gradient(45deg,
rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0),
linear-gradient(45deg,
rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
棋盘的mixin代码 -- scss
@mixin checkerboard($size, $base,
$accent: rgba(0,0,0,.25)) {
background: $base;
background-image:
linear-gradient(45deg,
$accent 25%, transparent 0,
transparent 75%, $accent 0),
linear-gradient(45deg,
$accent 25%, transparent 0,
transparent 75%, $accent 0);
background-position: 0 0, $size $size,
background-size: 2*$size 2*$size;
}
/* 调用时是这样的…… */
@include checkerboard(15px, #58a, tan);
棋盘的svg实现代码
<svg xmlns="http://www.w3.org/2000/svg"
width="100" height="100" fill-opacity=".25" >
<rect x="50" width="50" height="50" />
<rect y="50" width="50" height="50" />
</svg>
<!-- 调用 -->
background: #eee url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="100" height="100" \
fill-opacity=".25">\
<rect x="50" width="50" height="50" /> \
<rect y="50" width="50" height="50" /> \
</svg>');
background-size: 30px 30px;
请注意，如果你出于可读性的考虑，需要把一句CSS代码打断为多行，只需要用反斜杠（\）来转义每行末尾的换行就可以了。
伪随机背景
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;
使用质数来指定各组条纹的宽度，增加各组条纹宽度的随机真实性。相对质数是一种数字之间的关系， 而不是单个数字自身的属性。 构成相对质数的这些数字没有公约数， 但它们自己是可以有多个约数的（ 比如说， 10 和 27 是相对质数， 但它们都不是质数）。 很显然， 一个质数跟其他所有数字都可以构成相对质数。
连续的图像边框
border-image的工作原理
基本上就是九宫格伸缩法： 把图片切割成九块， 然后把它们应用到元素边框相应的边和角。
解决方案
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
合并简写为：
padding: 1em;
border: 1em solid transparent;
background:
linear-gradient(white, white) padding-box,
url(stone-art.jpg) border-box 0 / cover;
也适用于渐变图案，下面的可以实现一种老式信封样式的边框。
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
red 0, red 12.5%,
transparent 0, transparent 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%)
0 / 5em 5em;
也可以使用border-image来实现。
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,
red 0, red 1em,
transparent 0, transparent 2em,
#58a 0, #58a 3em,
transparent 0, transparent 4em);
不过 border-image 方法存在一些问题。
- 每当我们改变 border-image-slice时，都需要同时修改borderwidth来让它们相互匹配。
- 由于我们不能在 border-image-slice 属性中使用 em 单位， 只能把边框厚度指定为像素单位。
- 条纹的宽度需要在色标的位置信息中写好，因此我们在改变条纹宽度时， 需要修改四处。
蚂蚁行军效果
@keyframes ants { to { background-position: 100% } }
.marching-ants {
padding: 1em;
border: 1px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
animation: ants 12s linear infinite;
}
顶部边框的裁切效果，用来模拟传统的脚注
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,
currentColor 4em,
transparent 0);
padding-top: 1em;
