半透明边框

默认情况下，背景颜色会延伸到边框的区域下层。使用background-clip可以修改默认行为。

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

html 复制代码

<body>
  <div>Can I haz semi-transparent borders? Pretty please?</div>
</body>

css 复制代码

body {
  background: url(http://csssecrets.io/images/stone-art.jpg);
}

div {
  border: 10px solid rgba(255, 255, 255, 0.5);
  background: #fff;
  background-clip: padding-box;
  max-width: 20em;
  padding: 2em;
  margin: 2em auto;
}

多重边框

box-shadow方案

box-shadow可以设置多层，模拟出多重边框的效果。

css 复制代码

div {
  width: 200px;
  height: 120px;
  margin: 25px;
  background: yellowgreen;
  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}

需要注意的是，box-shadow与border的行为完全不一致。box-shadow不会影响布局 ，所以需要设置额外的边距来占位 。另外，box-shadow不会响应鼠标事件，比如悬停或点击（可以给box-shadow属性加上inset关键字，来使投影绘制在元素的内圈）。

outline方案

内层正常使用border，外层使用outline。这种方式只能支持两层边框，优点是更加灵活。比如设置虚线边框样式，或缝边效果。

css 复制代码

{
  border: 10px solid #655;
  outline: 5px dashed deeppink;
}

通过outline-offset可以与元素边缘的间距，可以设置负值实现缝边效果。

css 复制代码

{
  background: #705956;
  border-radius: 8px;
  outline: 1px dashed #fff;
  outline-offset: -10px;
}

灵活的背景定位

场景：将背景图片定位在容器的某个角落。

background-position方案

可以指定背景图片距离任意角的偏移量。

css 复制代码

{
  background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
  background-position: right 20px bottom 10px;
}

background-origin方案

background-origin可以指定background-position偏移的基准（默认是padding-box，即padding的边缘，从而边框不会遮住背景图片）。如果设置为content-box，则会以内容区边缘作为基准，此时背景图片的偏移量将与padding保持一致，这比前一个方案中指定具体的偏移量更清晰简洁。

css 复制代码

{
  padding: 10px;
  background: url("http://csssecrets.io/images/code-pirate.svg") no-repeat #58a
    bottom right;
  background-origin: content-box;
}

calc()方案

background-position默认是基于左上角偏移的，可以使用calc()来计算。

css 复制代码

{
  background: url("http://csssecrets.io/images/code-pirate.svg") no-repeat;
  background-position: calc(100% - 20px) calc(100% - 10px);
}

条纹背景

利用渐变与重复来实现条纹效果。

css 复制代码

{
  width: 200px;
  height: 120px;
  linear-gradient(#fb3 0 50%, #58a 50% 100%);
  background-size: 100% 30px;
}

还可以调整不同条纹的高度以及条纹个数。

通过repeating-linear-gradient也可以方便的实现条纹效果。

垂直条纹

渐变的默认方向为to bottom（从上至下），可以设置为to right，同时相应的调整background-size，达到垂直条纹效果。

css 复制代码

{
  background: linear-gradient(to right, #fb3 0 50%, #58a 50% 100%);
  background-size: 30px 100%;
}

斜向条纹

实现斜向条纹的代码如下：

css 复制代码

{
  background: linear-gradient(
    45deg,
    #fb3 0 25%,
    #58a 25% 50%,
    #fb3 50% 75%,
    #58a 75% 100%
  );
  background-size: 40px 40px;
}

原理是什么呢？其实上面的斜向条纹就是由下面这样的小方格拼接起来的，我们只用实现这个小方格，然后通过背景图片重复生成就行了。

灵活角度的斜向条纹

前面的方法只能实现45度角的条纹，通过repeating-linear-gradient可以实现任意角度的斜向条纹。repeating-linear-gradient可以重复渐变，所以可以实现任意的条纹效果，且不需要背景图片重复。

css 复制代码

{
	background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 15px 30px);
}

前面所有的条纹效果都可以通过repeating-linear-gradient实现。

同色系条纹

如果不同条纹的颜色是由同一个主色调衍生而来，可以设置背景为主色，将条纹设置为半透明色得到浅色条纹。

css 复制代码

{
  background: #58a;
  background-image: repeating-linear-gradient(
    30deg,
    rgba(255, 255, 255, 0.1) 0 15px,
    rgba(255, 255, 255, 0.2) 15px 30px
  );
}

复杂的背景图案

网格

将两个或多个渐变组合可以实现更复杂的效果，如网格。

css 复制代码

{
  background: white;
  background-image: linear-gradient(
    90deg,
    rgba(200, 0, 0, 0.5) 0 50%,
    transparent 50% 100%
  ),
    linear-gradient(rgba(200, 0, 0, 0.5) 0 50%, transparent 50% 100%);
  background-size: 30px 30px;
}

还可以通过将background-image设置为SVG 来构成更多样的图案。可在philiprogers.com/svgpatterns网页中查看效果。

波点

使用径向渐变创建原点。

css 复制代码

{
  background: #655;
  background-image: radial-gradient(tan 0 30%, transparent 30% 100%);
  background-size: 30px 30px;
}

还可以生成两个圆点，使用background-position分别指定它们的位置来将定位错开，实现更好的波点图案。

css 复制代码

{
  background: #655;
  background-image: radial-gradient(tan 0 30%, transparent 30% 100%),
    radial-gradient(tan 0 30%, transparent 30% 100%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

（缺点是边缘有点模糊～～）

棋盘

实际实现比预想的复杂，它实际上是由多个三角形拼接成的，代码如下：

css 复制代码

{
  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;
}

第二种方案是使用角向渐变（conic-gradient） ，这种方式会简单直观很多！

css 复制代码

{
background: conic-gradient(
  #bbb 0 25%,
  #eee 25% 50%,
  #bbb 50% 75%,
  #eee 75% 100%
);
background-size: 30px 30px;
}

第三种方案是使用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作为背景图片即可。

css 复制代码

{
  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;
}

将这些内容与混合模式（background-blend-mode: multiply）结合起来可以产生更多有趣的效果。网页地址是bennettfeely.com/gradients。

连续的图像边框

通过设置背景与透明边框可以实现图像边框效果。除了使用一层图片背景，还需要设置一层白色背景。同时图片背景需要设置background-clip为border-box，以在透明边框下显示出来。

css 复制代码

{
  padding: 1em;
  border: 1em solid transparent;
  background: linear-gradient(white, white),
    url(http://csssecrets.io/images/stone-art.jpg);
  background-size: cover;
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

左边是背景图，右边是边框效果。

调整背景图片并设置重复可以生成一些有趣的样式，比如老式信封。

css 复制代码

{
  padding: 1em;
  border: 1em solid transparent;
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(
      -45deg,
      #e05727 0 12.5%,
      transparent 12.5% 25%,
      #58a 25% 37.5%,
      transparent 37.5% 50%
    )
    0 / 5em 5em;
}

稍加修改并添加动画后可以实现常用的框选选中效果：

css 复制代码

div {
  padding: 1em;
  border: 2px 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;
}

@keyframes ants {
  to {
    background-position: 100%;
  }
}

CSS揭秘之背景与边框——get了一些新技能😺

半透明边框

多重边框

box-shadow方案

outline方案

灵活的背景定位

background-position方案

background-origin方案

calc()方案

条纹背景

垂直条纹

斜向条纹

灵活角度的斜向条纹

同色系条纹

复杂的背景图案

网格

波点

棋盘

连续的图像边框