# 背景与边框
# 1、背景颜色
background-color 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的<color>值。
.box {
background-color: #567895;
}
1
2
3
2
3
# 2、背景图片
background-image 属性允许在元素的背景中显示图像。
.a {
background-image: url(balloons.jpg);
}
1
2
3
2
3
# 3、背景平铺
background-repeat 属性用于控制图像的平铺行为。可用的值是:
no-repeat不重复。repeat-x水平重复。repeat-y垂直重复。repeat在两个方向重复。
.box {
background-image: url(star.png);
background-repeat: no-repeat;
}
1
2
3
4
2
3
4
# 4、背景图像的大小
background-size 属性可以设置长度或百分比值，来调整图像的大小以适应背景。
cover浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外contain浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
# 5、边框
我们可以使用 border 为一个框的所有四个边设置边框。
.box {
border: 1px solid black;
}
1
2
3
2
3
# 6、圆角
通过使用 border-radius 属性和与方框的每个角相关的长边来实现方框的圆角。
.box {
border-radius: 10px;
}
1
2
3
2
3