css揭秘实战技巧- 背景与边框 [一]

前言

这段时间，一直觉得css这块感觉每次写代码都是常用的那些基本属性，觉得始终没有对css有一个更深层次的掌握，所以，最近开始学习css相关进阶知识，首先第一关就是攻克 “css揭秘” 这本经典书籍，所以在阅读过程中，有一些总结想分享给大家，希望大家一起进步。

全目录

本系列文章，主要是围绕css3属性，实现我们常见的各种效果，这些效果都是我们实战开发中经常可以用到的效果：

本节要说的内容：

半透明边框

多重边框

灵活的背景定位

边框内圆角

条纹背景

复杂的背景图案

总结

一：半透明边框

默认情况下，css背景会覆盖到边框区域，如下：

代码如下：

width: 200px;
height: 200px;
background-color: green;
padding: 10px;
border: 10px solid rgba(0, 0, 0, .2);

如果想要背景只覆盖到padding区域或者content区域，如何处理？backgroud-clip;

backgroud-clip: border-box(默认) / padding-box / content-box;

二：多重边框

首先，我们看一下以下效果：

如何实现以下效果呢？

我们最先想到的就是使用边框

width: 200px;
height: 200px;
background: green;
border: 10px solid deeppink;

如果我们想实现两层边框呢？采用border + outline描边。

width: 200px;
height: 200px;
background: green;
border: 10px solid deeppink;
outline: 10px solid pink;

如果我们想实现多层边框呢？outline + border只能实现两层边框，两层以上的边框只能通过box-shadow实现。

width: 200px;
height: 200px;
background: green;
box-shadow: 0 0 0 10px blue, 0 0 0 20px deeppink, 0 0 0 30px pink;
//说明：box-shadow缩写：
//第一个参数表示水平方向向右的偏移量，第二个参数表示垂直方向向下的偏移量
//第三个参数表示阴影的模糊程度，第四个参数表示阴影半径大小。
//第五个参数：outsert/ inset 外阴影或者内阴影，默认为前者。

总结：一般实现多重边框的效果时，可以考虑outline和box-shadow去实现类似的效果，但是各个方式有不同的优缺点： 1. outline: 优点是可以使用和border一样的属性值，可以设置为dashed等效果，这些是box-shadow无法实现的，缺点就是只能实现两层边框，同时边框不一定会贴合border-radius的值，即边框如果设置了圆角，描边可能还是直角的。 2. box-shadow：优点是可以实现多层边框，但是使用box-shadow实现只是类似边框的效果，并不是真正的边框，也不会占据布局空间,也不会影响鼠标事件（即鼠标放在阴影和组件上都会触发相同的事件）

三：灵活的背景定位

实现如下效果：想要背景图片距离底部20px，距离右边20px

我们最先想到的就是采用background-position实现，代码如下：

width: 200px;
height: 200px;
background: url("./img/logo_blue.jpg") no-repeat green;
background-position: right 20px bottom 20px; 
//或者采用calc处理
//background-posotion: calc(100% - 20px) calc(100% - 20px)
background-size: 50px 50px;

以上代码，我们查看浏览器element发现：

此时，backgroud-position所对应的偏移量是相对于padding-box所在的区域，那么，如果要相对于border-box或者content-box呢？我们可以采用posotion-origin实现

background-origin: padding-box(默认)/border-box/content-box

四：边框内圆角

首先，我们看一下如下效果：边框外部直角，边框内部圆角

我们最常见的实现方法就是，采用两个div，一个设置直角，一个设置圆角，然后叠加在一起即可，这种方法绝对没问题，但是他使用了两个标签，那么使用一个标签可以实现吗？当然可以，

width: 400px;
height: 200px;
background: green;
outline: .5em solid red;
border-radius: .8em;
box-shadow: 0 0 0 .5em red;

实现说明：我们采用outline去进行外部描边，且为直角，内部采用border-radius设置圆角，且采用box-shadow去填充因为圆角而空出来的部分，从而实现边框内圆角的效果。（以下是没有设置box-shadow的效果）

五：条纹背景

1.首先看一下第一个效果：

看到效果，我们就知道，这不就是渐变嘛，采用linear-gradient即可，代码如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green, red);
//等价于：linear-gradient(green 0, red 100%)//0表示从开始渐变的起始位置，100%表示渐变的结束位置。

2.我们在看看第二个效果

实现代码如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green 20%, red 80%);//表示从上到下，20%处开始渐变，80%处停止渐变

3.如何采用linear-gradient实现条纹效果呢？即去除渐变的效果,效果如下：

关键点：就是从渐变的起始位置和结束位置下手，如果在开始渐变前，就结束了渐变，不就没有渐变效果了嘛，所以只需要设置结束渐变的位置小于开始渐变的位置即可,代码如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green 50%, red 50%); // 此处，第二参数只要小于等于50%都可以。

4.如何实现垂直条纹呢？

代码如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(90deg, green 50%, red 50%);// 即旋转90度 
//或者
background: linear-gradient(to right, green 50%, red 50%);//默认是to bottom，即等价于0deg。to right等价于90deg

5.如何设置渐变背景的大小？即background-size也可以像控制图片的背景大小一样，控制渐变的背景大小。如下效果：

代码如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(to right, green 50%, red 50%) no-repeat;//设置背景是否重复。
background-size: 30px 100%;//设置背景大小

6.如何倾斜条纹呢？实现效果如下：

此刻，我们可能想到的是，旋转一下不就可以了吗？

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(45deg, green 50%, red 50%);
background-size: 30px 30px;

效果如下：

这个时候，我们发现，我们在linear-gradient(45deg, green 50%, red 50%)设置的旋转，其实是旋转每一个背景块，并不是让整个div旋转，那么，这个时候，我们通过transform:rotate(45deg)来旋转div看一下效果：

但是看到效果，哈哈哈，明显不是我们想要的效果, 怎么办呢？当然是有其他属性支持喽，即repeating-linear-gradient，顾名思义，就是可以不断重复。实现代码如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: repeating-linear-gradient(45deg, green 0, red 30px);

实现的效果如下：

emmm,怎么出现渐变了呢？当然会出现了，你看看上面的实现代码，结束位置大于其实位置，那么，如何去除渐变呢？这里有一个小技巧，例如linear-gradient(green 0, green 30),这个时候虽然，结束位置大于起始位置，但是设置的同一种颜色，所以看不到渐变，看到的实际上还是纯色。所以，我们可以利用这个小技巧去实现代码：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: repeating-linear-gradient(45deg, green 0, green 30px, red 30px, red 60px, green 30px);

啦啦啦，我们最开始想要的效果就可以得到啦。

至此：条纹效果，不管是水平，垂直，还是倾斜，我们就可以都可以实现的，大致思路就是采用linear-gradient属性，然后通过设置起始位置和结束位置去掉渐变的效果，同时设置旋转的角度，配合repeating-linear-gradient即可实现我们想要的各种条纹效果。

六：复杂的背景图案

出了上面我们第五节所讲到的条纹背景，还有网格，波点，棋盘等更复杂的背景，下面我们就看看这些效果如何实现吧！

网格背景：水平条纹和垂直条纹背景叠加在一起既可以实现网格效果。代码如下：

width: 200px;
height: 200px;
background: white;
background-image: linear-gradient(green 50%, transparent 0), linear-gradient(90deg, red 50%, transparent 0);
background-size: 40px 40px 40px 40px;

上面代码实现的效果如下：

这是，如果我们把渐变的起始位置调整为1px，就可以得到我们想要的网格效果，那么最终效果如下：

同时，我们可以把不同的网格叠加在一起，代码如下：

width: 200px;
height: 200px;
background: white;
background-image: linear-gradient(green 1px, transparent 0), linear-gradient(90deg, red 1px, transparent 0), linear-gradient(green 5px, transparent 0), linear-gradient(90deg, red 5px, transparent 0);
background-size: 20px 20px, 20px 20px, 80px 80px, 80px 80px;

实现效果如下：

波点背景之前我们实现的条纹，网格背景都是采用linear-gradient线性渐变，接下来，我们来看看radial-gradient 径向渐变, 它主要用来创建各种圆形，椭圆，首先我们看一下最简单的图案：圆形阵列，效果如下：
代码如下：

width: 200px;
height: 200px;
background: #ddd;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

首先说明一下：radial-gradient第一个参数设置渐变起始位置以及颜色，第二个参数设置渐变结束位置以及颜色（和linear-gradient类似，如果结束位置大于起始位置，则去掉渐变效果）

坦白说，上面的波点图并不是真正的波点图，我们来看看真正波点图的效果：

其实就是，又错位增加了一层圆形的显示，那我们只需要将两种上面实现的效果，并且不同的backgroud-position，然后叠加在一起即可，代码如下：

width: 200px;
height: 200px;
background: #ddd;
background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

注意：上面的代码，我们要知道背景定位的位置必须是贴片的宽高的一半，这就意味着，如果我们要修改贴片的宽高，就要同时修改多个位置，那么遵从我们的dry原则，采用mixin解决(此处的代码是scss)

@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);

七：连续的图案边框

首先，我们看一下如下效果：

此时，大家看了效果，是不是觉得很简单？用 backgroud设置背景颜色为green,用border-color设置边框颜色为red不就可以啦，代码如下：

width: 300px;
height: 200px;
backgroud-color: green;
border: 20px solid red;

上面的方案是采用backgroud + border的方式，当然可以(该方案其实就是第一节案例，半透明边框的实现原理)

那我们是否可以采用两层backgroud的方式去实现呢？

width: 300px;
height: 200px;
border: 20px solid transparent;
backgroud: linear-gradident(green, green), red;
backgroud-clip: padding-box, border-box;

基于以上代码，我们可以将边框颜色改为边框图片，这样也就实现了我们所说的图案边框的效果

代码如下：

width: 300px;
height: 200px;
border: 20px solid transparent;
backgroud: linear-gradident(green, green), url('./icon.png');
backgroud-clip: padding-box, border-box;

实现的效果如下：

七：总结

之前，在用到content-box,padding-box，border-box等属性值的时候，可能更多的是用于box-sizing属性，用于改变盒模型，通过这一节的学习，我们也知道了，这三个属性值同样适用于backgroud-clip,backgroud-origin等属性，

background-clip: 用于控制背景铺满的区域，默认是border-box, 也可以为padding-box和border-box
backgroud-position: 设置背景的偏移量，默认是相对于padding-box的偏移量，这是由于backgroud-origin的默认值是padding-box
backgrund-origin: 控制backgroud-position的偏移量是相对于哪个区域的偏移量。
box-shadow：设置阴影效果，记住各个参数的含义。
linear-gradient/repeating-linear-gradient：线性渐变，可以实现条纹，网格等效果。
radial-gradient/repeating-radial-gradient: 径向渐变，可以实现波点。

以上是我们这节内容所涉及到的属性，同时我们要结合所将的案例，才可以有一个深入的了解，一起加油！！！