特殊边框
多重边框
box-shadow 方案
box-shadowj基本用法：
1
2
3
4
5
6
7
8
9
10
11
12
| div {
width: 200px;
margin: 50px;
padding: 10px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 0px 5px 20px rgba(0, 0, 0, 1),
0 5px 10px 25px rgb(33, 134, 201);
text-align: center;
}
|
!需注意，此方法生成的假边框不会影响鼠标事件
outline 方案
如果只需要两层边框，可以先设置常规边框，再用outline属性产生外层的边框
1
2
3
4
5
6
7
8
9
| div {
width: 200px;
margin: 50px;
padding: 10px;
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
text-align: center;
}
|
使用outline可以通过outline-offset属性控制它和元素的边距，可以为负
使用outline生成的边框不一定会贴合border-radius的圆角
1
2
3
4
5
6
7
8
9
10
11
| div {
width: 200px;
margin: 50px;
padding: 10px;
background: yellowgreen;
border: 10px solid #655;
border-radius: 8px;
outline: 1px dashed white;
outline-offset: -6px;
text-align: center;
}
|
边框内圆角
通常可以使用两个嵌套的div实现
1
2
3
4
5
| <div class="out">
<div class="in">
inner rounding
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
| .out {
width: 200px;
padding: .8em;
background: #655;
text-align: center;
}
.in {
border-radius: .8em;
padding: 1em;
background: tan;
}
|
在只使用一个div时，可以使用outline，但是使用outline生成的边框不一定会贴合border-radius的圆角，所以可以用box-shadow填充描边和圆角之间的空隙
1
2
3
4
5
6
7
8
9
| div {
margin: 50px;
width: 200px;
padding: 1em;
background: tan;
border-radius: .8em;
box-shadow: 0 0 0 .5em red;
outline: .6em solid #655;
}
|
box-shadow和outline使用相同的颜色即可得到上面的效果
半透明边框
给一个容器同时设置边框和背景时，可能会发现背景会延伸到边框所在的区域下层
1
2
3
4
| div {
background: white;
border: 20px solid rgba(255, 0, 0, .5);
}
|
可以通过backgroud-clip来调整
1
2
3
4
5
| div {
background: white;
background-clip: padding-box;
border: 20px solid rgba(255, 0, 0, .5);
}
|
灵活的背景定位
background-position允许指定背景图片距离任意边的偏移量
1
2
3
4
5
6
7
8
9
10
| div {
width: 300px;
height: 100px;
margin: 50px;
padding: 10px;
color: white;
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
font: 100%/1 sans-serif;
}
|
设置background-position属性后
1
2
3
| div {
background-position: right 50px bottom 30px;
}
|
若要设置偏移量和容器的内边距一致，如果采用上面的方法，则
1
2
3
4
5
| div {
padding: 10px;
background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;
}
|
可以观察到，如果padding的值改变，那么需要同时改变三个地方的值，可以使用background-origin
1
2
3
4
5
6
7
8
9
10
11
| div {
width: 300px;
height: 100px;
margin: 50px;
padding: 10px;
color: white;
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;
font: 100%/1 sans-serif;
}
|
如果以左上为基准，可以使用calc()函数计算
1
2
3
4
5
6
7
8
9
10
11
| div {
width: 300px;
height: 100px;
margin: 50px;
padding: 10px;
color: white;
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: calc(100% - 20px) calc(100% - 20px);
font: 100%/1 sans-serif;
}
|
条纹背景
可以通过在background属性中设置linear-gradient来生成条纹效果
基本语法：
1
| linear-gradient([<angle> | to <side-or-corner>,]? <color-stop> [, <color-stop>]+)
|
<side-or-corner>
描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left、right，第二个指出水平位置top、bottom。关键词的先后顺序无影响，且都是可选的
to top, to bottom, to left和to right这些值会被转换成角度0度、180度、270度和90度。
其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
<angle>
用角度值指定渐变的方向（或角度）。角度顺时针增加。
<color-stop>
由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>）
1
2
3
4
5
6
| div {
width: 300px;
height: 100px;
margin: 50px;
background: linear-gradient(60deg, red 20%, green 80%);
}
|
水平和垂直条纹
如果某个颜色的位置值比整个列表中在它之前的颜色的位置值都要小，则该颜色的位置值会被设置为它前面所有颜色位置值的最大值
水平条纹
可以通过将第一个颜色的位置设置为一半生成等宽条纹
1
2
3
4
5
6
7
| div {
width: 300px;
height: 100px;
margin: 50px;
background: linear-gradient(orange 50%, deepskyblue 50%);
background-size: 100% 25px;
}
|
也可以设置多个颜色
1
2
3
4
5
6
7
| div {
width: 300px;
height: 120px;
margin: 50px;
background: linear-gradient(orange 33.3%, deepskyblue 0, deepskyblue 66.6%, lawngreen 0);
background-size: 100% 30px;
}
|
垂直条纹
在开头添加额外的参数指定渐变的方向
1
2
3
4
5
6
7
| div {
width: 300px;
height: 100px;
margin: 50px;
background: linear-gradient(90deg, orange 50%, deepskyblue 0);
background-size: 30px 100%;
}
|
斜向条纹
若是直接将上述水平条纹旋转45度，则会形成如下效果：
1
2
3
4
5
6
7
| div {
width: 300px;
height: 100px;
margin: 50px;
background: linear-gradient(45deg, orange 50%, deepskyblue 0);
background-size: 50px 50px;
}
|
形成这种效果的原因是这种做法相当于把每个部分旋转。事实上，斜向条纹单个部分包含的条纹是四条而不是两条
1
2
3
4
5
6
7
8
9
| div {
width: 300px;
height: 100px;
margin: 50px;
background: linear-gradient(45deg,
orange 25%, deepskyblue 0, deepskyblue 50%,
orange 0, orange 75%, deepskyblue 0);
background-size: 50px 50px;
}
|
这种方法只能用于45度的条纹，有一个更通用的方法repeating-linear-gradient()
1
2
3
4
5
6
| div {
width: 300px;
height: 100px;
margin: 50px;
background: repeating-linear-gradient(60deg, orange 0, orange 15px, deepskyblue 0, deepskyblue 30px);
}
|
同色系条纹
如果想要的文理图案由同一色系的颜色组成，可以把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上
1
2
3
4
5
6
7
8
9
| div {
width: 300px;
height: 100px;
margin: 50px;
background: blue;
background-image: repeating-linear-gradient(45deg,
rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 15px,
transparent 0, transparent 30px)
}
|
复杂的背景图案
网格
可以把水平和垂直条纹叠加起来，通过彼此透明的区域显现
1
2
3
4
5
6
7
8
9
| div {
width: 300px;
height: 100px;
margin: 50px;
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;
}
|
如果希望网格格子大小可以调整，而网格线的粗细保持固定
1
2
3
4
5
6
7
8
9
| div {
width: 300px;
height: 100px;
margin: 50px;
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
}
|
也可以将两幅不同线宽不同颜色的网格叠加，e生成粗细不同的线条
1
2
3
4
5
6
7
8
9
10
11
12
| div {
width: 300px;
height: 100px;
margin: 50px;
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 0),
linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;
}
|
波点
通过径向渐变radial-gradient可以创建圆形的阵列
1
2
3
4
5
6
7
8
| div {
width: 300px;
height: 120px;
margin: 50px;
background: #58a;
background-image: radial-gradient(white 30%, transparent 0);
background-size: 30px 30px;
}
|
生成两层圆点阵列，并把背景定位错开
1
2
3
4
5
6
7
8
9
10
| div {
width: 300px;
height: 120px;
margin: 50px;
background: #58a;
background-image: radial-gradient(white 30%, transparent 0),
radial-gradient(white 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
|
棋盘
可以使用两个等腰直角三角形拼成棋盘的一个正方形
1
2
3
4
5
6
7
8
9
10
| div {
width: 300px;
height: 300px;
margin: 50px;
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
|
在创建另一幅正方形并移动位置
1
2
3
4
5
6
7
8
9
10
11
12
13
| div {
width: 300px;
height: 300px;
margin: 50px;
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-size: 30px 30px;
background-position: 0 0, 15px 15px,
15px 15px, 30px 30px;
}
|
另一种写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| div {
width: 300px;
height: 300px;
margin: 50px;
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-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
|
