设置多个背景
1
2
3
| <body>
<section></section>
</body>
|
1
2
3
4
5
| section {
width: 429px;
height: 265px;
background: url(image2.gif) no-repeat, url(image1.png);
}
|
上面给 section 设置了多个背景(用逗号隔开),默认第一个背景图片在最上面(image2.gif),类似的我们可以添加多个背景。
边框
CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素, 这样在我们设置 100% 的窗口的时候就计算起来特别麻烦,后来引入了一个 border-box
来解决这个问题。
1
2
3
4
5
6
| section {
width: 429px;
height: 265px;
padding : 10px;
border : 5px solid rgb(235, 244, 246);
}
|
1
2
3
4
5
6
7
| section {
width: 429px;
height: 265px;
padding : 10px;
border : 5px solid rgb(235, 244, 246);
box-sizing : border-box;
}
|
box-sizing :content-box|border-box|inherit;
- content-box : 上面的默认行为,就是会拉伸宽度和高度。
- border-box : 根据实际宽高来将边框和padding约束到元素内部。
- inherit : 从父元素继承 box-sizing 属性的值。
背景裁剪
无论上面我们设置 box-sizing 是什么,会发现都会有背景在边框之下的现象,这样就会导致背景的一部分被边框裁切掉。
设置一个 background-clip: padding-box;
会达到我们期望的结果,看看效果:
background-clip :border-box|padding-box|content-box;
- border-box :背景被裁剪到边框盒(默认)。
- padding-box :背景被裁剪到内边距框。
- content-box :背景被裁剪到内容框。
背景尺寸
background-size
属性接受水平和垂直两个值,这些值可以使用像素或者百分比,然后再加上一个可选的关键字 cover 或 contain。
background-size : length|percentage|cover|contain;
- length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
- percentage:以父元素的百分比来设置背景图像的宽度和高度。
- cover : 背景图等比缩放直到覆盖满整个元素。
- contain :背景图等比缩放后完全包含在元素中。
1
| background-size: 300px; //只制定宽度,高度等比缩放
|
1
| background-size: 50% 50%; //宽高均为容器的50%
|
1
| background-size: cover; //等比缩放到覆盖满整个图形
|
1
| background-size: contain; //比缩放后完全包含在元素中
|
线性渐变
1
| background: linear-gradient(#fed46e, #ba5c61);
|
上面定义了一个简单的渐变,默认方向是从上到下,可以从8个方向中指定一个方向(left, right, top, bottom):
1
| background: linear-gradient(to left top, #fed46e, #ba5c61);
|
当然,为了更加灵活的调节渐变方向,也可以指定渐变的角度:
1
| background-image : linear-gradient(30deg, #fed46e, #ba5c61);
|
增加几个渐变颜色,并指定每个颜色的开始渐变的位置:
1
| background-image : linear-gradient(#b1585d,#fed46e 20%,#388fa2 60%);
|
实现一种颜色突变,只需要将两个相邻颜色设置为一样:
1
| background-image : linear-gradient(#b1585d,#fed46e 40%,#388fa2 40%);
|
径向渐变
上面我们使用的是 linear-gradient
实现的线性渐变,接下来我们使用 radial-gradient
实现径向渐变。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .flexbox .s0 {
background-image : radial-gradient(#fed46e, #ba5c61);
}
.flexbox .s1 {
background-image : radial-gradient(circle, #fed46e, #ba5c61);
}
.flexbox .s2 {
background-image : radial-gradient(circle closest-side, #fed46e, #ba5c61);
}
.flexbox .s3 {
background-image : radial-gradient(circle closest-corner, #fed46e, #ba5c61);
}
.flexbox .s4 {
background-image : radial-gradient(circle farthest-corner, #fed46e, #ba5c61);
}
.flexbox .s5 {
background-image : radial-gradient(circle farthest-side, #fed46e, #ba5c61);
}
|
- closest-side 离圆心最近的边作为结束点。
- farthest-side 离圆心最远的边作为结束点。
- closest-corner 离圆心最近的一个角作为结束点。
- farthest-corner 离圆心最远的一个角作为结束点。
接下来我们看几组移动圆心坐标的案例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .flexbox .s0 {
background-image : radial-gradient(circle at top left,#fed46e,#ba5c61);
}
.flexbox .s1 {
background-image : radial-gradient(circle at top right, #fed46e, #ba5c61);
}
.flexbox .s2 {
background-image : radial-gradient(circle at 40px 30px, #fed46e, #ba5c61);
}
.flexbox .s3 {
background-image : radial-gradient(circle at 40px -30px, #fed46e, #ba5c61);
}
.flexbox .s4 {
background-image : radial-gradient(circle , #b1585d 30%,#fed46e 30%,#fed46e 40%,#388fa2 40%);
}
.flexbox .s5 {
background-image : radial-gradient(circle at top left, #b1585d 30%,#fed46e 30%,#fed46e 40%,#388fa2 40%);
}
|
重复渐变
重复渐变有 repeating-linear-gradient
和 repeating-radial-gradient
这两种类型。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .flexbox .s0 {
background-image : repeating-linear-gradient(90deg,#fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px);
}
.flexbox .s1 {
background-image : repeating-linear-gradient(45deg,#fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px);
}
.flexbox .s2 {
background-image : repeating-linear-gradient(45deg , #fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px,#388fa2 6px, #388fa2 9px);
}
.flexbox .s3 {
background-image : repeating-radial-gradient(circle , #fed46e,#ba5c61 6px);
}
.flexbox .s4 {
background-image : repeating-radial-gradient(circle at bottom, #fed46e,#ba5c61 6px);
}
.flexbox .s5 {
background-image : repeating-radial-gradient(circle, #fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px,#388fa2 6px, #388fa2 9px);
}
|
为了方便你自行测试,我贴出其余样式和布局代码:
1
2
3
4
5
6
7
8
9
10
| <body>
<section class="flexbox">
<div><div class="bgrg s0"></div><span>线性重复渐变</span></div>
<div><div class="bgrg s1"></div><span>45度线性重复</span></div>
<div><div class="bgrg s2"></div><span>三色线性重复</span></div>
<div><div class="bgrg s3"></div><span>径向重复渐变</span></div>
<div><div class="bgrg s4"></div><span>圆形偏移</span></div>
<div><div class="bgrg s5"></div><span>三色径向渐变</span></div>
</section>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| .flexbox {
display: flex;
width: 600px;
flex-wrap: wrap;
}
.flexbox div{
text-align: center;
}
.flexbox .bgrg{
width: 140px;
height: 100px;
margin: 20px;
padding : 10px;
border : 5px dashed rgb(0,0,0);
box-sizing: border-box;
background-clip:padding-box;
text-align: center;
}
.flexbox span {
color: #333;
size: 10px;
}
|