你该知道的《css揭秘》--背景与边框条纹篇

[libin1991]

半透明边框

• background-clip

  background-clip: border-box|padding-box|content-box; 默认是border-box。该属性规定背景的绘制区域，通俗点讲就是，能背景可以延伸的范围，三个属性值从字面上不难理解，分别是可延伸到，border,padding,content。

• RGBA/HSLA

  分别为RGB/HSL，加上透明度A，值为0~1。

将背景绘制范围设为padding-box，边框设置为透明色，即可实现效果。 实现方案：

.translucent-borders{
    width: 300px;
    height: 300px;
    padding:10px;
    border:10px solid hsla(0,0%,100%,.5);
    background-color: #fff;
    background-clip:padding-box;
}
复制代码

多重边框

上图多边框可使用 box-shadow 实现，有一个缺点就是只能设置实线。

需要注意使用box-shadow制作‘假’边框,不会影响布局，而且也不会受到 box-sizing 属性的影响，所以在实际使用中，需要注意为这些‘假’边框留出位置，可以使用margin或者padding配合inset（向内绘制）来解决。

box-shadow支持逗号分隔语法，我们 可以创建任意数量的投影。

实现方案：

.multiple-borders{
    width: 200px;
    height: 200px;
    padding:10px;
    box-sizing: border-box;
    /*border:10px solid red;*/
    border-radius: 10px;
    margin:50px;
    background: pink;
    box-shadow:
    0 0 0 10px red,
    0 0 0 10px blue, 
    0 0 0 20px green ,
    0 0 0 30px purple,
    0 2px 15px 40px rgba(0,0,0,.6);
}
复制代码

如上图，如果只是需要两层边框，当然我们还可以使用outline来实现， 因为outline 并不能 接受用逗号分隔的多个值。所以只可以实现两层边框。

我们可以outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值，来实现上图的缝边效果。

实现方案：

.outline-borders{
    width: 200px;
    height: 200px;
    padding:25px;
    background: yellowgreen;  
    outline: 2px dashed #fff;
    outline-offset: -15px;
}
复制代码

注意：outline有个bug，边框不一定会贴合border-radius产生的圆角，如下图，所以如果是有圆角，需要配合box-shadow来填补间隙。

灵活的背景定位

很多时候，我们想针对容器某个角对背景图片做偏移定位。 在 CSS 2.1 中，我们只能指定距离左上角的偏移量，或者干脆完全靠齐到其 他三个角。但是，我们有时希望图片和容器的边角之间能留出一定的空隙， (类似内边距的效果)，如上图(距离右边20px，下边20px),这时候我们就可以使用css3中提供的以下方案。

• background-position 的扩展语法方案

  在 CSS 背景与边框(第三版)(w3.org/TR/css3-bac…)中， background-position 属性已经得到扩展，它允许我们指定背景图片距离任 意角的偏移量，只要我们在偏移量前面指定关键字。

实现方案：

.background-position{
    width: 200px;
    height: 200px;
    padding: 10px;
    color:#FFF;
    background: url(http://csssecrets.io/images/code-pirate.svg)  no-repeat blue;
    background-position: right 20px bottom 20px;
}
复制代码

• background-origin 方案

在给背景图片设置距离某个角的偏移量时，如果是上图这种情况:偏移量与容器的内边距一致。如果采用上面提到的 background-position 的扩展语法方案，代码不够 DRY，我们可以使用background-origin，改变背景的相对定位，让它自动地跟着我们设定的内边距走，不用另外声明偏移量的值。

注：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

实现方案：

.background-origin{
    margin: 20px;
    width: 200px;
    height: 200px;
    padding: 10px;
    border:10px solid red;
    color:#FFF;
    background: url(http://csssecrets.io/images/code-pirate.svg) right bottom no-repeat blue; 
    background-origin: content-box;
}
复制代码

• calc() 方案

  请不要忘记在 calc() 函数 内部的 - 和 + 运算符的两侧各加 一个空白符，否则会产生解析错误!

该方案就是使用calc()直接计算出距离左上角的位置，设置给background-position即可。

实现方案：

.calc{
    width: 200px;
    height: 200px;
    padding: 10px;
    color:#fff;
    background: url(http://csssecrets.io/images/code-pirate.svg) calc(100% - 10px) calc(100% - 10px) no-repeat blue;
}
复制代码

边框内圆角

上图可通过上文提到的 outline无法贴合圆角配合box-shadow实现。box-shadow的扩展半径为圆角半径的一半即可。

实现方案：

.inner-rounding{
    width: 200px;
    height: 200px;
    padding:10px;
    background: hotpink;
    border-radius: 10px;
    outline:10px solid purple;
    box-shadow: 0 0 0 5px purple;
    margin: 30px;
}
复制代码

条纹背景

实现条纹背景主要使用的就是 linear-gradient()这个渐变属性。

根据css3规范，如果某个色标的位置值比整个列表中在它之前的色标的位置都要小，则该色标的位置值会被设置为他前面所有色标位置值的最大值。只需修改前面的值。

给出实现方案：

  /*水平条纹 */
    .horizontal-stripes{
        width: 200px;
        height: 200px;
        background: linear-gradient(red 50%, green 0);
        background-size: 100% 30px;
    }
<span class="hljs-comment">/* 垂直条纹 */</span>
<span class="hljs-selector-class">.vertical-stripes</span>{
    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(90deg, red 50%, green 0);
    <span class="hljs-attribute">background-size</span>: <span class="hljs-number">30px</span> <span class="hljs-number">100%</span>; 
}

<span class="hljs-comment">/* 只能45度 */</span>
<span class="hljs-selector-class">.diagonal-stripes</span>{
    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(45deg, red 25%, green 0,green 50%, red 0,red 75%,green 0);
    <span class="hljs-comment">/* 记得乘以根号2 */</span>
    <span class="hljs-attribute">background-size</span>: <span class="hljs-number">42px</span> <span class="hljs-number">42px</span>;  
}

<span class="hljs-comment">/* 任意度数 */</span>
<span class="hljs-selector-class">.better-diagonal-stripes</span>{
    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">repeating-linear-gradient</span>(60deg,red, red 15px, green 0, green 30px );
    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">repeating-linear-gradient</span>(30deg,pink 0 15px, blue 0 30px, green 0 45px);  <span class="hljs-comment">/* 简写 */</span>
}

<span class="hljs-comment">/* 同色系条纹 */</span>
<span class="hljs-selector-class">.subtle-stripes</span>{
    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">background-color</span>: blue;
    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">repeating-linear-gradient</span>(45deg,  hsla(0,0%,100%,.3) <span class="hljs-number">0</span> <span class="hljs-number">15px</span>, transparent <span class="hljs-number">0</span> <span class="hljs-number">30px</span>);
}

复制代码

复杂的背景图案

实现方案：

.Polka{
    width: 200px;
    height: 200px;
    background: #655;
    background-image: 
    radial-gradient(pink 20%, transparent 0),
    radial-gradient(pink 20%,transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}
复制代码

实现方案：

.blueprint{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    background-image: 
    linear-gradient(#fff 2px, transparent 0),
    linear-gradient(90deg,#fff 2px, transparent 0),
    linear-gradient(#fff 1px, transparent 0),
    linear-gradient(90deg,#fff 1px, transparent 0);
    background-size:60px 60px,60px 60px,20px 20px,20px 20px;
}
复制代码

连续的图像边框

实现方案：

.continuous-image-borders{
    width: 400px;
    height: 200px;
    border:20px solid transparent;
    padding:10px;
    background: linear-gradient(#fff,#fff) padding-box, url(http://csssecrets.io/images/stone-art.jpg) border-box;
    background-size: cover;
}
复制代码

实现方案：

.vintage-envelope{
    width: 300px;
    height: 200px;
    padding:10px;
    border:10px solid transparent;
    background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(-45deg,red 0 15px, transparent 0 30px,blue 0 45px, transparent 0 60px) border-box;
}
复制代码