css边框与背景

摘要：半透明边框默认情况下，背景会延伸到边框所在的区域下层。连续的图像边框思路就是在图片之上，再叠加一层纯白的实色背景。为了让下层的图片背景透过边框区域显示出来，需要给两层背景指定不同的值。

1.半透明边框

默认情况下，背景会延伸到边框所在的区域下层。可以通过background-clip 属性来调整。这个属性的初始值是border-box，意味着背景会被元素的border-box（边框的外沿框）裁切掉。设置为padding-box，背景不会透过边框所在的范围，览器就会用内边距的外沿来把背景裁切掉。

border: 10px solid pink;
background: red;
background-clip: padding-box;

效果如下：

2.多重边框

实现的办法入下：
(1) box-shadow的方式
它支持逗号分隔语法，所以可以创建任意数量的投影。box-shadow会跟随元素的形状，元素设置border-radius时，它会沿着这个圆角显示

.div {
  width: 40px;
  height: 40px;
  background: yellowgreen;
  box-shadow: 0 0 0 10px #655,
  /* 想在外圈再加一道5px 的外框，那就需要指定扩张半径的值为15px（10px+5px) */
  0 0 0 15px deeppink,
  0 2px 5px 15px rgba(0,0,0,.6);
}

效果如下：

(2)outline实现方案

outline的实现只适用于实现两层边框，通过一层border和一层outline

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

用outline边框样式十分灵活，不像box-shadow 方案只能模拟实线边框，假设我们需要产生虚线边框效果，box-shadow 就没办法了。
outline(描边) 不会跟随div的圆角的设置，还是会显示直角的样式

3 灵活的背景定位

(1) background-position
它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。

/* 背景图片跟右边缘保持20px 的偏移量，同时跟底边保持10px 的偏移量 */
background-position: right 20px bottom 10px;

(2) background-origin
默认情况下，background-position 是以padding-box 为准的，这样边框才不会遮住背景图片。因此，top、left 默认指的是padding-box 的左上角

background-origin，可以改变这种行为。在默认情况下，它的值是padding-box。如果把它的值改成content-box，在background-position 属性中使用的边角关键字将会以内容区的边缘作为基准。

每个元素身上都存在三个矩形框，border box（边框的外沿框）、padding box（内边距的外沿框）和content box（内容区的外沿框）。

background-origin的值分别是上面的三种

4.边框内圆角

实现方式是使用box-shadow和outline的方式

div {
    background: tan;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em #655;
    outline: .6em solid #655;
}

主要原因是：描边并不会跟着元素的圆角走（因而显示出直角），但box-shadow 却是会的。

5.条纹背景

(1) 水平条纹的实现

/* 
 *0 会被解析成30%，在css的规定中如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值
 * 等同于 background: linear-gradient(#fb3 30%, #58a 30%);
 */
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

(2) 垂直条纹

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

(3) 斜向条纹

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

(4) 灵活的同色系条纹
通过把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹。好处是只需要修改一个地方就可以改变所有颜色。

div {
  background-image: repeating-linear-gradient(30deg,
    hsla(0, 0%, 100%, .1),
    hsla(0, 0%, 100%, .1) 15px,
    transparent 0, transparent 30px);
}

6.各种网格背景的实现

把多个渐变图案组合起来，让它们透过彼此的透明区域显现时可以创建各种网格图案。
网格中每个格子的大小可以调整，而网格线条的粗细同时保持固定时，就应该使用长度而不是百分比作为。举例来说，类似图纸辅助线的网格就是这种情况。

div {
  width: 200px;
  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;
}

div {
  width: 200px;
  height: 200px;
  background: #58a;
  background-image:
  linear-gradient(white 1px, transparent 0),
  linear-gradient(90deg, white 1px, transparent 0);
  background-size: 30px 30px;
}

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

7.波点效果的实现

div {
  width: 200px;
  height: 200px;
  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;
}

8.棋盘图案的渐变

(1)思路是用两个直角三角形来拼合出方块，再把第二层渐变在水平和垂直方向均移动贴片长度的一半，就可以把它们拼合成一个完整的方块。

div {
  width: 200px;
  height: 200px;
  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;
}

(2)svg的方式

svg {
  background: #eee url("data:image/svg+xml,
    ");
  background-size: 30px 30px;
}

9.伪随机背景
使用的是 “蝉原则”，就是通过质数来增加随机真实性。比如设计一个没有规律的线性渐变就可以使用这种方式。

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

这种蝉原则，同样适用于：
(1) 在照片图库中，为每幅图片应用细微的伪随机旋转效果时，可以使用多个:nth-child(a) 选择符，且让a 是质数。
„(2) 如果要生成一个动画，而且想让它看起来不是按照明显的规律在循环时，我们可以应用多个时长为质数的动画。

8.连续的图像边框

思路就是在图片之上，再叠加一层纯白的实色背景。为了让下层的图片背景透过边框区域显示出来，需要给两层背景指定不同的background-clip 值。最后一个要点在于，在多重背景的最底层设置背景色，需要用一道从白色过渡到白色的CSS 渐变来模拟出纯白实色背景的效果。

.border-img {
  width: 200px;
  height: 200px;
  padding: 1em;
  border: 1em solid transparent;
  background: linear-gradient(white, white), url(dog.jpg);
  background-size: cover;
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

这个技巧同样适合渐变的图案。比如：信封的样式。

div {
  width: 200px;
  height: 100px;
  padding: 16px;
  border: 16px 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;
}

还可以实现虚线滚动框

@keyframes ants {
  to {
    background-position:  100%;
  }
}
.dotted{
  margin-top: 20px;
  margin-bottom: 20px;
  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;
}