1. 半透明边框——background-clip: padding-box;
假设想给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：
border: 10px solid hsla(0,0%,100%,.5); // 半透明颜色
background: white;
但是看起来使用半透明颜色并不能实现半透明边框，但我们的边框其实是存在的。
默认情况下，背景会延伸到边框所在的区域下层。
这个特性完全打破了我们的设计意图。我们所做的事情并没有让 body 的背景从半透明白色边框处透上来，而是在半透明白色边框处透出了这个容器自己的纯白实色背景，这实际上得到的效果跟纯白实色的边框看起来完全一样。
- 可以通过 background-clip 属性来调整上述默认行为所带来的不便。
- 这个属性的初始值是 border-box，意味着背景会被元素的 border box（边框的外沿框）裁切掉。
- 如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。
border: 10px solid hsla(0, 0%, 100%, 0.5);
background: white;
background-clip: padding-box;
2. 实现多个边框
2.1 box-shadow 方案
通常用box-shadow 来生成投影。不过它还接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
box-shadow 比border的好处在于，它支持逗号分隔语法，我们可以创建任意数量的投影。因此，我们可以非常轻松地在上面的示例中再加上一道deeppink 颜色的“边框”：
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
唯一需要注意的是，box-shadow 是层层叠加的，第一层投影位于最顶层，依次类推。
因此，你需要按此规律调整扩张半径。比如说，在前面的代码中，我们想在外圈再加一道 5px 的外框，那就需要指定扩张半径的值为15px（10px+5px）。如果你愿意，甚至还可以在这些“边框”的底下再加一层常规的投影：
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink,
0 2px 5px 15px rgba(0, 0, 0, 0.6);
多重投影解决方案有一些注意事项：
- 投影的行为跟边框不完全一致，因为它不会影响布局，而且也不会受到 box-sizing 属性的影响。不过，你还是可以通过内边距或外边距（这取决于投影是内嵌和还是外扩的）来额外模拟出边框所需要占据的空间。
- 上述投影方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件，比如悬停或点击。如果这一点非常重要，你可以给box-shadow 属性加上 inset 关键字，来使投影绘制在元素的内圈。请注意，此时你需要增加额外的内边距来腾出足够的空隙
2.2 outline 方案
如果只需要两层边框，那就可以先设置一层常规边框，再加上 outline（描边）属性来产生外层的边框。
这种方法的一大优点在于边框样式十分灵活，不像上面的 box-shadow 方案只能模拟实线边框（假设我们需要产生虚线边框效果，box-shadow 就没辙了）
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
outline方案的另一个好处在于，你可以通过 outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值。这对于某些效果来说非常有用。
这个outline方案同样也有一些需要注意的地方。
- 如上所述，它只适用于双层“边框”的场景，因为 outline 并不能接受用逗号分隔的多个值。如果我们需要获得更多层的边框，前一种box-shadow方案就是我们唯一的选择了。
- outline会贴合 border-radius 属性产生的圆角。
3 实现背景图片的定位
有时希望图片和容器的边角之间能留出一定的空隙（类似内边距的效果）。
3.1 background-position 扩展语法方案——指定背景图片距离任意角的偏移量
background-position 属性的扩展语法允许指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。举例来说，如果想让背景图片跟右边缘保持 20px 的偏移量，同时跟底边保持 10px 的偏移量，可以这样做：
background: url("./tulip.svg") no-repeat #58a;
background-position: right 20px bottom 10px;
另外，在不支持 background-position 扩展语法的浏览器中，背景图片会紧贴在左上角（背景图片的默认位置）。提供一个回退方案也很简单，就是把老套的bottom right 定位值写进 background 的简写属性中：
background: url("./tulip.svg") no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
3.2 background-origin 方案——背景图片偏移量与容器的内边距一致
在给背景图片设置距离某个角的偏移量时，有一种情况极其常见：背景图片偏移量与容器的内边距一致。有一个更简单的办法可以实现这个需求：让它自动地跟着我们设定的内边距走，不用另外声明偏移量的值。
每个元素身上都存在三个矩形框border box（边框的外沿框）、padding box（内边距的外沿框）和 content box（内容区的外沿框）。
默认情况下，background-position 是以 padding box 为准的，这样边框才不会遮住背景图片。
在默认情况下，background-origin的值是padding-box。如果把它的值改成 content-box，我们在 background-position 属性中使用的边角关键字将会以内容区的边缘作为基准（也就是说，此时背景
图片距离边角的偏移量就跟内边距保持一致了）：
padding: 10px;
background: url("./tulip.svg") no-repeat #58a bottom right; /* 或 100% 100% */
background-origin: content-box;
如果你想让背景图片的偏移量与内边距稍稍有些不同（比如稍微收敛或超出），那么可以在使用background-origin: content-box 的同时，再通过 background-position的扩展语法来设置这些额外的偏移量。
3.3 calc() 方案——仍然按照左上角偏移的思路考虑
把背景图片定位到距离底边10px且距离右边20px 的位置。如果我们仍然以左上角偏移的思路来考虑 ，其实就是希望它有一个 100% - 20px 的水平偏移量，以及 100% - 10px 的垂直偏移量。
calc() 函数允许我们执行此类运算，它可以完美地在background-position 属性中使用：
background: url("./tulip.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
不要忘记在 calc() 函数内部的 - 和 + 运算符的两侧各加一个空白符，否则会产生解析错误！这个规则如此怪异，是为了向前兼容：未来，在 calc() 内部可能会允许使用关键字，而这些关键字可能会包含连字符（即减号）。
4. 边框内实现圆角
一个容器，只在内侧有圆角，而边框或描边outline的四个角在外部保持直角的形状
4.1 使用两个元素实现
<div class="something-meaningful">
<div>
I have a nice subtle inner rounding, don't I look pretty?
</div>
</div>
.something-meaningful {
background: #655;
padding: 0.8em;
}
.something-meaningful > div {
background: tan;
border-radius: 0.8em;
padding: 1em;
}
5.在 CSS 中创建条纹图案——linear-gradient()
- 设置一条基本的垂直线性渐变，颜色从
#fb3过渡到#58a
background: linear-gradient(#fb3, #58a);
- 接着，把这两个色标拉近一点：
background: linear-gradient(#fb3 20%, #58a 80%);
现在容器顶部的 20% 区域被填充为#fb3 实色，而底部 20% 区域被填充为#58a 实色。真正的渐变只出现在容器 60% 的高度区域。
- 如果我们把两个色标继续拉近（分别改为 40% 和 60%，参见下图），那真正的渐变区域就变得更窄了。
4. 如果我们把两个色标重合在一起：
background: linear-gradient(#fb3 50%, #58a 50%);
如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。
可以看到，已经没有任何渐变效果了，只有两块实色，各占据了 background-image 一半的面积。本质上，我们已经创建了两条巨大的水平条纹。
- 因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样通过 background-size 来调整渐变图像尺寸：
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
在下图中可以看到，我们把这两条条纹的高度都缩小到了 15px。由于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹
- 我们还可以用相同的方法来创建不等宽的条纹，只需调整色标的位置值即可：
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
- 为了避免每次改动条纹宽度时都要修改两个数字，我们把第二个色标的位置值设置为 0，那它的位置就 总是会被浏览器调整为前一个色标的位置值
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;
如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值
- 创建超过两种颜色的条纹，也是很容易的。举例来说，下面的代码可以生成三种颜色的水平条纹
background: linear-gradient(
#fb3 33.3%,
#58a 0,
#58a 66.6%,
yellowgreen 0
);
background-size: 100% 45px;
// 等价于
background: linear-gradient(
#fb3 33.3%,
#58a 33.3%,
#58a 66.6%,
yellowgreen 66.6%
);
background-size: 100% 45px;
5.1 垂直条纹
垂直条纹的代码跟水平条纹几乎是一样的，差别主要在于：
- 需要在开头加上一个额外的参数来指定渐变的方向。
- 在水平条纹的代码中，其实也可以加上这个参数，只不过它的默认值 to bottom 省略了。
- 最后，还需要把 background-size 的值颠倒一下
background: linear-gradient(to right, /* 或 90deg */#fb3 50%, #58a 0);
background-size: 30px 100%;
5.2 斜向条纹
如果我们再次改变 background-size 的值和渐变的方向，是不是就可以得到斜向（比如45°）的条纹图案呢？
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;
可以发现，这个办法行不通。原因在于我们只是把每个“贴片”内部的渐变旋转了 45°，而不是把整个重复的背景都旋转了。我们需要增加一些色标：使单个贴片包含四条条纹，而不是两条，只有这样才有可能做到无缝拼接。
background: linear-gradient(
45deg,
#fb3 25%,
#58a 25%,
#58a 50%,
#fb3 50%,
#fb3 75%,
#58a 75%
);
background-size: 30px 30px;
如果想让条纹的宽度变化为想要的 15px，就需要把 background-size 指定为 2 × 15√2 ≈42.4 像素
background-size: 42.4px 42.4px;
5.3 使用重复渐变实现斜向条纹——repeating-linear-gradient()
还有一种更好的方法来创建斜向条纹。
linear-gradient() 和 radial-gradient() 还各有一个循环式的加强版：repeating-linear-gradient() 和 repeating-radial-gradient()。它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景。
background: repeating-linear-gradient(45deg,#fb3, #58a 30px);
重复线性渐变完美适用于——条纹效果，一个渐变图案就可自动重复并铺满整个背景。因此，我们再也不需要去创建可以无缝拼接的贴片了
background: repeating-linear-gradient(
45deg,
#fb3 0px,
#fb3 15px,
#58a 15px,
#58a 30px
);
使用重复渐变实现条纹效果的好处
- 第一个明显的好处就是减少了颜色重复：我们要改动任何颜色时只需要修改两处，而不是原来的三处。
- 另外一点，在重复渐变的色标中指定的长度——直接代表了条纹自身的宽度，而不是原来的 background-size需要额外计算√2之类的。
- 最大的好处在于，可以随心所欲地改变渐变的角度了
60°条纹只需这样写即可：
background: repeating-linear-gradient(
60deg,
#fb3,
#fb3 15px,
#58a 15px,
#58a 30px
);
请注意，在这个方法中，不论条纹的角度如何，我们在创建双色条纹时都需要用到四个色标。因此最好先用前面的方法来实现水平或垂直的条纹，再用这种重复渐变方法来实现斜向条纹
5.4 灵活的同色系条纹
有时我们想要的条纹图案是由属于同一色系的几种颜色组成的，
background: repeating-linear-gradient(
30deg,
#79b,
#79b 15px,
#58a 15px,
#58a 30px
);
但这时如果我们想要改变这个条纹的主色调，需要修改四处
还有一种更好的方法：不再为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹
background: #58a;
background-image: repeating-linear-gradient(
30deg,
hsla(0, 0%, 100%, 0.1),
hsla(0, 0%, 100%, 0.1) 15px,
transparent 15px,
transparent 30px
);
现在只需要修改一个背景色就可以改变所有颜色了
6. 复杂的背景图案——网格、波点、棋盘
6.1 网格
只使用一个渐变时，能创建的图案并不多。但可以把多个渐变图案组合起来，让它们透过彼此的透明区域显现。例如把水平和垂直的条纹叠加起来，从而得到各种样式的网格
background: white;
background-image: linear-gradient(
90deg,
rgba(200, 0, 0, 0.5) 50%,
transparent 0
),
linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 0);
background-size: 30px 30px;
6.1.1 固定长度的网格线条
使用长度而不是百分比作为色标,这样网格中每个格子的大小可以调整，而网格线条的粗细保持固定长度。
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
得到的结果就是一幅用 1px 白线画出来的 30px 大小的网格图案
6.1.2 两个网格图案叠加
另外可以把两幅不同线宽、不同颜色的网格图案叠加起来，得到一个更加逼真的蓝图网格
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
6.2 波点——径向渐变radial-gradient()
之前都是用线性渐变生成图案，但是，径向渐变允许创建圆形、椭圆，或是它们的一部分。径向渐变能够创建的最简单的图案是圆点的阵列
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;
请注意，为了达到效果，第二层背景的偏移定位值必须是贴片宽高的一半。这意味着如果要改动贴片的尺寸，需要修改四处。
如果你使用预处理器，可以把它转换成这个 mixin ：
@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);
6.3 棋盘
- 创建一个直角三角形
- 把色标的顺序反转，就可以创建一个相反方向的三角形
- 用两个直角三角形来拼合出我们想要的方块，要把第二层渐变在水平和垂直方向均移动贴片长度的一半，就可以把它们拼合成一个完整的方块
- 把现有的棋盘的一半重复一份，从而创建出另一组正方形，并且偏移它们的定位值
- 最终结果就是一幅棋盘图案
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;
可以把第一组和第二组合并为一层渐变，把第三组和第四组合并为一层渐变，然后还可以把深灰色改成半透明的黑色——这样只需要修改底色就可以改变整个棋盘的色调
background: #eee;
background-image: linear-gradient(
45deg,
rgba(0, 0, 0, 0.25) 25%,
transparent 0,
transparent 75%,
rgba(0, 0, 0, 0.25) 0
),
linear-gradient(
45deg,
rgba(0, 0, 0, 0.25) 25%,
transparent 0,
transparent 75%,
rgba(0, 0, 0, 0.25) 0
);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
6.3.1 使用SaSS预处理器的 mixin 来简化代码
@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;
}
div.home {
margin: 100px auto;
height: 200px;
width: 300px;
@include checkerboard(15px, #58a, tan);
}
6.3.2 使用SVG实现棋盘
上边的代码量不能算少，可以转到 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>
可以把 SVG 文件以 data URI 的方式内嵌到样式表中，甚至不需要用 base64 或 URLencode 来对其编码，这样还可以省掉 HTTP 请求：
<!DOCTYPE html>
<html>
<head>
<style>
.callout {
margin: 100px auto;
height: 200px;
width: 300px;
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;
}
</style>
</head>
<body>
<div class="callout"></div>
</body>
</html>
请注意，出于可读性的考虑，如果需要把一句 CSS 代码打断为多行，只需要用反斜杠（\）来转义每行末尾的换行。
6.3.3 使用重复圆锥渐变实现棋盘
圆锥渐变，通常看起来像是一个俯视的圆锥体。它们的生成方式是这样的：所有色标的颜色变化是由一条射线绕着端点旋转来推进的。
background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);
background-size: 30px 30px;
7. 伪随机背景——通过质数来增加随机真实性
想得到不同颜色和不同宽度的垂直条纹（方便起见，只讨论四种颜色），并且不能让人看出贴片平铺时的“接缝”。
background: linear-gradient(
90deg,
#fb3 15%,
#655 15%,
#655 40%,
#ab4 40%,
#ab4 65%,
hsl(20, 40%, 90%) 65%
);
background-size: 80px 100%;
下图的渐变图案每隔 80px（即 background-size 的值）就会复重一次：
为了模拟条纹的随机性，把这组条纹从一个平面拆散为多个图层：一种颜色作为底色，另三种颜色作为条纹，然后再让条纹以不同的间隔进行重复平铺——在色标中定好各组条纹的宽度，再用 background-size 来控制两条同种颜色条纹的间距
background: hsl(20, 40%, 90%);
background-image: linear-gradient(90deg, #fb3 10px, transparent 0),
linear-gradient(90deg, #ab4 20px, transparent 0),
linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;
最顶层贴片没有被任何东西遮挡——它的重复规律最容易被察觉。因此把平铺间距最大的贴片安排在最顶层（在上边的例子中是橙色条纹）。
仔细观察的话，仍然可以看出上边的图案每隔 240px 就会重复一次，就是各层背景图像以不同间距重复数次后再次统一对齐。实际上就是所有 background-size 的最小公倍数，而40、60 和 80的最小公倍数正是 240。
7.1 用质数来指定各组条纹的宽度
为了让最小公倍数最大化，各组条纹的间距尽量选择质数，这样最小公倍数就是不同条纹间距的乘积。甚至可以用质数来指定各组条纹的宽度进一步增加随机性
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 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;
平铺贴片的尺寸现在是 41×61×83=207 583 像素
通过质数来增加随机真实性。这个方法不仅适用于背景，还可以用于其他涉及有规律重复的情况。
- 在照片图库中，为每幅图片应用细微的伪随机旋转效果时，可以使用多个 :nth-child(a) 选择符，且让 a 是质数。
- 如果要生成一个动画，而且想让它看起来不是按照明显的规律在循环时，我们可以应用多个时长为质数的动画。
8. 连续的图像边框
把一幅图案或图片应用为边框，而不是背景。
8.1 使用两个HTML元素实现图像边框
最简单的办法是使用两个 HTML 元素：一个元素用来把石雕图片设为背景，另一个元素用来存放内容，并设置纯白背景，然后覆盖在前者之上：
<!DOCTYPE html>
<html>
<head>
<style>
.something-meaningful {
background: url('http://csssecrets.io/images/stone-art.jpg');
background-size: cover;
padding: 1em;
}
.something-meaningful > div {
background: white;
padding: 1em;
}
</style>
</head>
<body>
<div class="something-meaningful">
<div>
I have a nice stone art border, don't I look pretty?
</div>
</div>
</body>
</html>
8.2 设置双层背景实现
- 在石雕背景图片之上，再叠加一层纯白的实色背景。
- 为了让下层的图片背景透过边框区域显示出来，我们需要给两层背景指定不同的 background-clip 值。
- 最后一个要点在于，我们只能在多重背景的最底层设置背景色，因此需要用一道从白色过渡到白色的 CSS 渐变来模拟出纯白实色背景的效果。
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 的默认值是 padding-box——此时图片的显示尺寸取决于 padding box 的尺寸，而且被放置在了 padding box 的左上角。
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;
// background 属性简写,减少代码量
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
url(stone-art.jpg) border-box 0 / cover;
8.3 生成一种老式信封样式的边框
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
);
8.4 生成好玩的蚂蚁行军边框
蚂蚁行军边框是一种虚线边框，看起来在不断转动，就好像排队前进的蚂蚁一样——料——几乎所有的图像编辑软件都会使用这个效果来标示选区
创建蚂蚁行军效果，我们将会用到“老式信封”技巧的一个变种。
- 把条纹转变为黑白两色，并把边框的宽度减少至 1px（注意把斜向条纹转变成虚线边框）
- 然后再把 background-size 改为某个合适的值。
- 最后，我们把 background-position 以动画的方式改变为 100%，就可以让它滚动起来了
@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 / 0.6em 0.6em;
animation: ants 12s linear infinite;
}
还可以创建出各种特殊样式的虚线框：不管是为虚线线段指定不同的颜色，还是自定义线段的长度和间隙的长度
8.5 border-image 搭配渐变图案使用
如果需要一个像脚注那样顶部边框被裁切的效果。
- 我们所需要的就是 border-image 属性再加上一条由渐变生成的垂直条纹，并把要裁切的长度在渐变中写好。
- 边框线的粗细交给border-width 来控制。
<!DOCTYPE html>
<html>
<head>
<style>
.footnote {
font-size: 16px;
color: #000;
border-top: 0.2em solid transparent;
border-image: 100% 0 0
linear-gradient(90deg, currentColor 4em, transparent 0);
padding-top: 1em;
}
</style>
</head>
<body>
<div class="footnote"><sup>1</sup> This is a footnote.</div>
</body>
</html>
- 指定为em 单位，效果会根据 font-size 的变化而自动调整。
- 另外，使用了currentColor，这条边框跟文字保持相同的颜色
