CSS Secret——Backgrounds & Borders

透明边框

如果我们想要一个白色背景和半透明白的边框我们该怎么办呢~

如果你对边框和背景的关系不太了解：

border: 10px solid hsla(0,0%,100%,.5);
background: white;

这样你是看不到透明边框的，因为背景本身是会铺到边框里的。

使用background-clip: padding-box;可以使背景只铺到内边距。

border: 10px solid rgba(255, 0, 255, 0.3);
background: white;
background-clip: padding-box;

多重边框

使用阴影

之前都用好几个元素套起来的办法来实现多重边框，其实使用多个阴影就能实现。

#muti-border{
height:20px;
background: yellowgreen;
margin:15px;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
}

这样每个阴影都会显示并叠起来，就像多个边框了。

这里有个问题要注意，阴影不同于border，它的宽度是不在盒模型中的，也就是说你的假阴影可能会覆盖在别的元素上。你可以使用和阴影相同宽度的内边距和外边距来模拟这一点（你的阴影如果是往里叠的就要使用内边距了）。往里叠有个好处，就是这个元素的点击，鼠标进入等事件在你的假边框上都会触发。但是如果你是往外叠的，那这个元素上的事件在假边框上就触发不了了。

使用outline

如果你只需要两个边框，可以使用outline来模拟。这个outline不仅可以设置与元素边界的距离（正负都行），还可以设置像border一样的style，刚才的方法只能模拟solid。

#outline-border{
background: #655;
border: 10px solid #655;
outline: 1px dashed #fff;
outline-offset:-15px;
height:100px;
width:200px;
border-radius: 10px;
color:#fff;
margin:30px;
padding:10px;
}

这个方法最大的限制就是outline只能有一个。

还有一个问题就是outline不贴着圆角，它永远是方的。

灵活的背景位置

我们现在在设置background-position时使用的一般是关键字和相对左上角的偏移量。

想象这样一个使用场景，一个宽高不定的div，我们想让一个背景相对右下角有一个固定的位置，但要有一点距离不贴边。

啊哦。

拓展background-position

在CSS Backgrounds & Borders Level 3中，在关键词后提供偏移量可以指定从哪里偏移。不过，为了兼容老的浏览器，要提供回滚值哦。

#background{
background: url(../img/marker_red.png) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
height:100px;
}

background-origin方案

当我们规定background-position时的相对位置由这个属性来控制，默认为padding box，如果改为content-box就可以使用padding来直接控制background相对于外面的距离了。

padding: 10px; background: url(../img/marker_red.png) no-repeat #58a bottom right; /* or 100% 100% */
background-origin: content-box;

同样，现在在关键字后加上offset还是可以继续调整的。

使用calc()

这个神奇的函数可以跨单位的计算值哦。

background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);

内部圆角

我们有时需要一个外圆内方的元素~~

使用两个div来达成目标很容易，但是这吗，明明应该是一个元素呀。

我们首先使用outline永远是矩形不跟随边框圆角的特性。

#rect-round{
background: tan;
border-radius: .8em;
padding: 1em;
outline: .7em solid #655;
margin:20px;
width:20%;
}

这样就在圆角的元素外面套了一个矩形的框，但是这里会有个问题，圆角和框之间的空隙是没有被填上的。

这时就使用不带模糊的box-shadow，这个是会贴合圆角的。outline和box-shadow都不占框模型，它们会重合，这样圆角和框之间的缝就填上了。

#rect-round{
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .7em solid #655;
margin:20px;
width:20%;
}

条纹背景

创建条纹背景以前从来都是使用图片来解决的。

不过其实我们可以使用渐变背景来达成目的。

linear-gradient这个东西其实就是个由浏览器解析生成的背景图片。

利用这一点：

水平条纹

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

这里我们创建了一个毫无过渡的，30px高的线性过度背景，因为背景是可以repeat的，所以就有了全背景的条纹效果。

通过这样设置可以创建不均匀的条纹：

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

多个条纹：

#striped{
height:200px;
background: linear-gradient(#fb3 33.3%,
#58a 33.3%, #58a 66.6%, yellowgreen 66.6%);
background-size: 100% 45px;
}

垂直条纹

垂直条纹就是使用有角度的线性渐变

#striped{
height:200px;
background: linear-gradient(to right, /* or 90deg */
#fb3 50%, #58a 0);
background-size: 30px 100%;
}

倾斜条纹

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

使用透明色来更灵活的创建条纹

有时我们创建的条纹只有细微的差别，那么使用纯色背景加半透明条纹就很方便改主题，而且对不支持渐变的浏览器还很方便的提供了一个fallback。

#striped{
height:200px;
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
}

复杂背景

网格

同时使用垂直和水平，可以创造出很神奇的效果呢～

#grid1{
height:200px;
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
}
#grid2{
height:200px;
background: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
}
#grid3{
height:200px;
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: 75px 75px, 75px 75px,15px 15px, 15px 15px;
}

点点嗷

如果需要点点的背景，使用radial-gradient来创建是很不错的呦。

这里使用了sass，这样可以创建不同的各种各样的点点

@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;
}
#dot{
height:200px;
@include polka(50px, 20%, #655, tan);
}

西洋棋盘

这个直接通过方块并不很好实现，通过把方块分成两个三角形比较好实现。

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;

进一步合并，使用sass：

@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的话会更方便：

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;

伪随机背景

利用素数，使重复的区间足够长，达到随机条纹的目的

#random{
height:200px;
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%;
}

连续的图片边框

我们想让内容浮在一张图片上，这张图片就像是内容的边框一样。

border-image可是实现不了的哦。

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

同样的原理，可以用来模拟信封边框的样式：

#border-image1{
height: 200px;
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;
}

配合动画，可以做出想ps里选区虚线框那样的动画。

@keyframes ants { to { background-position: 100% } }
#border-image2 {
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 120s linear infinite;
}