这是我参与更文挑战的第4天，活动详情查看： 更文挑战
半透明边框
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(240, 50%, 50%, 0.3);
background: red;
background-clip: padding-box; /* 浏览器会用内边距的外沿来把背景裁切掉 */
多重边框
box-shadow 方案
box-shadow 接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实现边框。
background: gold;
box-shadow: 0 0 0 10px #123456;
不过 box-shadow 的好处在于， 它支持逗号分隔语法， 我们 可以创建任意数量的投影。因此， 我们可以非常轻松地在上面的示例中再加 上一道 greenyellow 颜色的“边框”。
background: gold;
box-shadow: 0 0 0 10px #123456, 0 0 0 15px greenyellow;
注：box-shadow 是层层叠加的，第一层投影位于最顶层，以此类推，因此需要按照此规律调整扩张半径。比如说， 在前面的代码中， 我们想在外圈再加一道 5px 的外框， 那就需要指定扩张半径的值为15px(10px+5px)，加投影的 box-shadow 。
background: gold;
box-shadow: 0 0 0 10px #123456,
0 0 0 15px greenyellow,
0 2px 5px 15px rgba(0, 0, 0, 0.6);
描边（outline）方案
background: gold;
border: 10px solid #123456;
outline: 5px solid greenyellow;
可以通过 outline-offset 属性来控制它跟元素边缘之间的间距， 这个属性甚至可以接受负值。只适用于双层“边框”的场景（若多层边框则使用 box-shadow ）,边框不一定会贴合 border-radius 属性产生的圆角。
background: gold;
border: 10px solid #123456;
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-position 扩展语法的浏览器中，提供一个回退方案：
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() 函数内部的 - 和 + 运算符的两侧各加一个空白符，否则会产生解析错误！
边框内圆角
难题
一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状。用两个元素可以实现此效果。
<style>
.something-meaningful {
background: peachpuff;
padding: .8em;
}
.something-meaningful > div {
background: burlywood;
border-radius: .8em;
padding: 1em;
}
</style>
<div class="something-meaningful">
<div>这是一段测试边框内圆角的文字。</div>
</div>
将 box-shadow 和 outline 结合使用，可以实现边框内圆角的效果。box-shadow 的扩张半径要比描边的宽度值小，但同时又要比(根号2-1)r大(r表示 border-radius)。
background: burlywood;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em peachpuff;
outline: .6em solid peachpuff;
条纹背景
横向条纹
background: linear-gradient(lightsalmon 30%, greenyellow 30%);
background-size: 100% 30px;
垂直条纹
/* to right 或者 90deg */
background: linear-gradient(to right, lightsalmon 50%, greenyellow 0);
background-size: 30px 100%;
斜向条纹
background: linear-gradient(45deg,
lightsalmon 25%, greenyellow 0, greenyellow 50%,
lightsalmon 0, lightsalmon 75%, greenyellow 0);
background-size: 30px 30px;
更好的斜向条纹
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);
可以看到这个边框更顺滑一点~~
灵活的同色系条纹
background: darkcyan;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
复杂的背景图案
网格
background: darkolivegreen;
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: darkolivegreen;
background-image: radial-gradient(pink 20%, transparent 0),
radial-gradient(pink 20%, transparent 0);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
波点的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,
lightsteelblue 25%, transparent 0,
transparent 75%, lightsteelblue 0),
linear-gradient(45deg,
lightsteelblue 25%, transparent 0,
transparent 75%, lightsteelblue 0);
background-position: 0 0, 20px 20px;
background-size: 40px 40px;
棋盘的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代码打断为多行，只需要用反斜杠（\）来转义每行末尾的换行就可以了。
伪随机背景
使用质数来指定各组条纹的宽度，增加各组条纹宽度的随机真实性。相对质数是一种数字之间的关系， 而不是单个数字自身的属性。 构成相对质数的这些数字没有公约数， 但它们自己是可以有多个约数的（ 比如说， 10 和 27 是相对质数， 但它们都不是质数）。 很显然， 一个质数跟其他所有数字都可以构成相对质数。
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%;
最后说一句
如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。
