[CSS]-6-边框与背景
引言
这篇文章介绍块状元素边框样式设置以及区块背景的样式设置。
文章目录
- 0×1.边框
- a.方角边框
- b.圆角边框
- c.图像边框
- 0×2.背景
- a.设置区块背景颜色
- b.设置区块背景透明度
- c.设置背景图片与样式
- d.调整背景图片位置
- e.配置背景图片缩放
- f.配置背景和文字一起滚动
- g.设置背景起始点
- h.设置背景裁剪方式
- i.background综合配置
0×1.边框
在前面的文章中已经使用过边框属性border，下面详细的介绍一下这个属性可以实现的三种不同样式的边框效果。
a.方角边框
这是最常见的一种边框样式，我们前面已经使用过虚线边框，双线边框，实线边框，点线边框，下面是border属性可以使用的所有边框值：
none 没有边框；
dashed 破折线边框；
dotted 圆点线边框；
double 双线边框；
groove 槽线边框；
inset 使元素内容具有内嵌效果的边框；
outset 使元素内容具有外凸效果的边框；
ridge 脊线边框；
solid 实线边框；
最常见的就是none无边框，dashed虚线边框，solid实线边框这三个；
下面挑选其中的几个属性值举例，大家可以将这些属性值分别代入border属性后，看看他们的效果都是什么样子的：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>方角边框实例</title>
<style type="text/css">
<!--语法："border:边框厚度 边框样式 边框颜色;"-->
#d1{
border: 10px ridge pink;
width: 250px;
height: 60px;
<!--使边框向内扩展，并设置文字居中，因为上下都被扩展了10px，所以实际行高只有40px-->
box-sizing: border-box;
text-align: center;
line-height: 40px;
}
<!--虽然看上去inset和ridge没什么太大区别，但请注意边框的阴影变化，边框厚度越厚，变化越明显-->
#d2{
border: 10px inset pink;
width: 250px;
height: 60px;
box-sizing: border-box;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div id="d1">www.qingsword.com</div>
<br>
<div id="d2">www.qingsword.com</div>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
除了使用border属性一次性设置上下左右四面的边框外，border还有四个子属性能够分别设置上下左右的边框，例如：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>方角边框实例</title>
<style type="text/css">
<!--分别设置上下左右边框为不同样式-->
#d1{
border-top: 10px ridge pink;
border-left: 10px dotted green;
border-bottom: 10px dashed red;
border-right: 10px double yellow;
width: 250px;
height: 60px;
box-sizing: border-box;
text-align: center;
line-height: 40px;
}
<!--单独设置左边框为绿色实线，有没有觉得很眼熟呢？本站的所有标题风格都是使用这种方法实现的-->
#d2{
border-left: 10px solid green;
width: 250px;
height: 60px;
box-sizing: border-box;
text-align: center;
<!--因为上下并没有边框，所以文字区行高仍然是60px-->
line-height: 60px;
}
</style>
</head>
<body>
<div id="d1">www.qingsword.com</div>
<br>
<div id="d2">www.qingsword.com</div>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
b.圆角边框
圆角边框是css3新增的特性，在方角边框的基础上，配置一个border-radius属性来实现，可一次配置四个角，也可单独配置某个角，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>圆角边框使用实例</title>
<style type="text/css">
<!--"border-radius: 20px;"属性将d1四个角的圆滑度都配置成20px-->
#d1{
width: 250px;
height: 100px;
box-sizing: border-box;
text-align: center;
line-height: 80px;
border: 10px solid green;
border-radius: 20px;
}
<!--可以使用下面的方法分别配置每个角的"圆滑度"，语法结构："border-radius:左上角 右上角 右下角 左下角"，本例配置了上左和下左的圆滑度为20px，其余两个角的圆滑度为0px-->
#d2{
width: 250px;
height: 100px;
box-sizing: border-box;
text-align: center;
line-height: 80px;
border: 10px solid green;
border-radius: 20px 0px 0px 20px;
}
<!--除了d2的方法可以分别配置每个角的"圆滑度"外，border还有四个子属性可以完成这些配置："border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-left-radius"，本例仅配置了上左和右下20px的圆滑度-->
#d3{
width: 250px;
height: 100px;
box-sizing: border-box;
text-align: center;
line-height: 80px;
border: 10px solid green;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<br>
<div id="d2">
www.qingsword.com
</div>
<br>
<div id="d3">
www.qingsword.com
</div>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
c.图像边框
border-image属性，可以用来给块状元素边框添加背景图像，这个属性有多个子属性，如果要将这些子属性一次性配置在border-image里，完整的语法格式如下：
border-image:border-image-source border-image-slice [ / border-image-width | / border-image-outset ] border-image-repeat;
这些子属性的简单描述如下：
border-image-source：用来指定边框图像文件的路径；
border-image-slice：边框图形切割值；
border-image-width：边框图形显示的宽度，这个属性与border属性在边框图形属性中必须要配置其一，如果配置了这个属性，将会替换掉border属性中配置的边框宽度；
border-image-outset：图形边框向外扩充的宽度；
border-image-repeat：拉伸区域的显示效果；
下面是w3c官方提供一张边框背景图，默认情况是下面这样子的，每个菱形的对角线长度是27px：
border-image-slice属性同margin属性一样，如果只配置一个值，那么就是一次性设置"上右下左"，当然，也可以设置四个不同的值，例如"border-image-slice:27 26 25 24"，如果本例我仅用一个值切割这张图形"border-image-slice:27"，切割动画如下：
程序首先会从图像上方向下偏移27px，切割第一刀，然后从图像最右侧往左偏移27px切割第二刀，以此类推；
切割后的模型如下图所示，被分成9个区域：
其中的1234区域，用来填充标签边框的四个角，5678区域，默认情况下被拉升填充边框的四条边，如果border-image-slice属性跟随了一个fill值，那么第9块的区域会被填充，否则显示成标签背景色。
说了这么多，都只是铺垫，一个实例解决所有疑问：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>图形边框使用实例</title>
<style type="text/css">
#d1{
width: 300px;
height: 100px;
background-color: pink;
color: black;
<!--图形边框原文件相对于本文档的位置-->
border-image-source: url("images/CSS-image-border-1.png");
<!--图形边框宽度-->
border-image-width: 27px;
<!--上右下左都使用27px切割原文件，将原文件切割成9块区域，并且填充第9区-->
border-image-slice: 27 fill;
<!--文字居中显示-->
text-align: center;
line-height: 100px;
}
<!--配置了border属性但没有配置border-image-width属性，border属性被隐藏，但位置还在，所以文字会显示在边框内部，图形边框代替border边框显示，其宽度就是border属性配置的宽度，除此之外border-image-outset属性会让图像边框向外扩充10px-->
#d2{
width: 300px;
height: 100px;
background-color: pink;
color: black;
border: 27px solid green;
border-image-source: url("images/CSS-image-border-1.png");
border-image-slice: 27 fill;
border-image-outset: 10px;
text-align: center;
line-height: 46px;
}
<!--配置了border属性与border-image-width属性，border属性被隐藏，图形边框代替border边框显示，并且因为border-image-width属性值为15px，小于27px，图形切割后的部分会自适应的调整大小，自动适应这个宽度（等比例缩放），最后配置拉升区域值为round，拉升区域会被5678四块切割区域的图形等比例的平铺-->
#d3{
width: 300px;
height: 100px;
border: 27px solid green;
border-image-source: url("images/CSS-image-border-1.png");
border-image-width: 15px;
border-image-slice: 27 fill;
border-image-repeat: round;
text-align: center;
line-height: 46px;
}
<!--将所有属性值写在border-image属性里，请参考本文给出的完整格式-->
#d4{
width: 300px;
height: 100px;
border: 27px solid green;
border-image: url("images/CSS-image-border-1.png") 27 fill/27px/0px round;
text-align: center;
line-height: 46px;
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<br>
<div id="d2">
www.qingsword.com
</div>
<br>
<div id="d3">
www.qingsword.com
</div>
<br>
<div id="d4">
www.qingsword.com
</div>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
www.qingsword.com
0×2.背景
a.设置区块背景颜色
在前面的文章中不止一次的使用过background-color这个属性，其功能就是给某个标签添加一个背景颜色；
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>背景颜色配置实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 80px;
color: black;
line-height: 80px;
text-align: center;
background-color: pink;
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
</body>
</html>
显示效果：
www.qingsword.com
b.设置区块背景透明度
所有标签默认都是透明背景色，有时我们用css选择器匹配了同类的几个标签并配置了背景色，此时如果想让其中的某个标签背景色为透明，就可以使用这个属性，将其背景色重新配置成透明：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>背景透明色配置实例</title>
<style type="text/css">
#d1{
width: 300px;
height: 80px;
color: black;
line-height: 80px;
text-align: center;
background-color: pink;
}
<!--使用派生选择器，将d1下面的所有b的背景设置成绿色-->
#d1 b{
background-color: green;
}
<!--将d1下面第一个b的背景设置成透明色，这将清除上面配置的绿色背景-->
#d1 b:first-child{
background-color: transparent;
}
</style>
</head>
<body>
<div id="d1">
www.<b>qingsword</b>.com <b>晴刃</b>
</div>
</body>
</html>
显示效果：
www.qingsword.com 晴刃
c.设置背景图片与样式
可以给任何块状元素添加背景图：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>背景图配置实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 162px;
color: black;
line-height: 162px;
text-align: center;
color:green;
border: 1px solid green;
<!--配置背景图，url中指定背景图片相对本文档的相对位置，或使用绝对路径，默认情况下背景图会平铺-->
background-image: url("CSS-image-border-1.png");
}
#d2{
width: 250px;
height: 162px;
color: black;
line-height: 162px;
text-align: center;
color:green;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
<!--仅让背景图水平平铺，不垂直平铺，如果设置成repeat-y则仅垂直平铺，默认值为repeat，两个方向都平铺-->
background-repeat: repeat-x;
}
#d3{
width: 250px;
height: 162px;
color: black;
line-height: 162px;
text-align: center;
color:green;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
<!--不平铺-->
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<hr>
<div id="d2">
www.qingsword.com
</div>
<hr>
<div id="d3">
www.qingsword.com
</div>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
d.调整背景图片位置
background-position属性用于调整图片在标签中的相对位置，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>背景图位置调整实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 162px;
color: green;
line-height: 162px;
text-align: center;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
<!--只有背景图不平铺，才能调整位置-->
background-repeat: no-repeat;
<!--让背景图移动到标签底部中央-->
background-position: bottom;
}
#d2{
width: 250px;
height: 162px;
color: green;
line-height: 162px;
text-align: center;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
<!--让背景图移动到标签中心-->
background-position: center;
}
#d3{
width: 250px;
height: 162px;
color: green;
line-height: 162px;
text-align: center;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
<!--让背景图移动到左侧中央-->
background-position: left;
}
#d3{
width: 250px;
height: 162px;
color: green;
line-height: 162px;
text-align: center;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
<!--让背景图移动到左侧底部-->
background-position: left bottom;
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<hr>
<div id="d2">
www.qingsword.com
</div>
<hr>
<div id="d3">
www.qingsword.com
</div>
<hr>
<div id="d4">
www.qingsword.com
</div>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
www.qingsword.com
background-position除了上面介绍的4个属性值外，还有right，top，right bottom，top right，top left这几个属性，移动的位置就和字面意思一样，不再赘述。
Ps：在调整图片位置的过程中会出现几个小问题，当对body设置背景图片并且调整图片在bottom的时候，发现图片和top的效果是一样的，这是因为浏览器不知道body的具体高度是多少（center同样是在顶部），可以手动给body设置一个高度范围，或者设置html标签的css属性将height设置成100%，这样图片居中等样式就会起作用了。
html{
height: 100%;
}
body{
background-image: url("images/CSS-image-border-1.png");
background-repeat: no-repeat;
background-position: center;
}
e.配置背景图片缩放
背景图片的缩放有好几种方式，分别是：cover缩放、contain缩放、百分比缩放、指定宽高缩放；
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>背景图片缩放实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 162px;
color: green;
line-height: 162px;
text-align: center;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
<!--cover和百分比缩放一样，会锁定纵横比，当图像宽度达到250px时因为锁定了纵横比，高度自然就会超出160px的范围-->
background-size: cover;
}
#d2{
width: 250px;
height: 162px;
color: green;
line-height: 162px;
text-align: center;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
<!--contain也是锁定纵横比，不同的是，当背景图片的宽度和高度达到标签边界时，自动停止缩放-->
background-size: contain;
}
#d3{
width: 162px;
height: 162px;
color: green;
line-height: 162px;
text-align: center;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
<!--同cover，本例将标签的宽高改成了162px，是背景图宽高的2倍，所以能看到一个完整放大的背景图-->
background-size: 100%;
}
#d4{
width: 250px;
height: 162px;
color: green;
line-height: 162px;
text-align: center;
border: 1px solid green;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
<!--手动指定背景图宽度扩充到100px，高度为162px-->
background-size: 100px 162px;
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<hr>
<div id="d2">
www.qingsword.com
</div>
<hr>
<div id="d3">
www.qingsword.com
</div>
<hr>
<div id="d4">
www.qingsword.com
</div>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
www.qingsword.com
f.配置背景和文字一起滚动
默认background-attachment属性是scroll，背景随文字一起滚动，设置fixed后，背景固定，只有文字滚动；
/*给页面配置一张大图背景，并且设置图片固定，只有文字滚动*/
body{
background-image: url("big-img.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
g.设置背景起始点
在块状元素合模型中，我们已经介绍了块状元素合模型的层次结构，默认情况下，给一个块状元素配置背景图，背景图是在合模型的border内部填充的，但css提供了一个属性background-origin，能够允许背景图延伸到border中，background-origin允许的属性值如下：
border-box 在margin盒子内部绘制背景；
padding-box 在border盒子内部绘制背景，默认值；
content-box 在padding盒子内部绘制背景；
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>背景起始点实例</title>
<style type="text/css">
#d1{
width: 162px;
height: 162px;
border: 10px dotted green;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
background-size: contain;
box-sizing: border-box;
word-wrap: break-word;
<!--让文字区与border有20px的距离-->
padding: 20px;
<!--配置背景图片只能在文字区内部绘制-->
background-origin: content-box;
}
#d2{
width: 162px;
height: 162px;
border: 10px dotted green;
box-sizing: border-box;
word-wrap: break-word;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
background-size: contain;
<!--配置背景图片能够在margin盒子内部绘制，margin盒子包含了border盒子，所以图片会延伸到边框中-->
background-origin: border-box;
}
#d3{
width: 162px;
height: 162px;
border: 10px dotted green;
word-wrap: break-word;
box-sizing: border-box;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
background-size: contain;
<!--默认配置，不写就是这条属性，在border盒子内部绘制图形-->
background-origin: padding-box;
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<hr>
<div id="d2">
www.qingsword.com
</div>
<hr>
<div id="d3">
www.qingsword.com
</div>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
www.qingsword.com
h.设置背景裁剪方式
css提供了一个背景图片裁剪属性background-clip，其属性值如下：
border-box 裁剪掉border盒子外的背景；
padding-box 裁剪掉padding盒子外的背景；
content-box 裁剪掉content盒子外的背景；
根据上面background-origin属性的解释，这个属性就变得十分好理解了，就是将超出这些属性值范围的多余图像裁剪掉，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>背景裁剪实例</title>
<style type="text/css">
#d1{
width: 162px;
height: 162px;
border: 10px dotted green;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
background-size: contain;
box-sizing: border-box;
word-wrap: break-word;
<!--设置文字与border之间的距离是20px-->
padding: 20px;
<!--因为没有配置背景图跟随文字区缩放，所以背景图是填充整个元素的（border内的区域），这条配置会将超出content盒子的所有背景都裁减掉-->
background-clip: content-box;
}
#d2{
width: 162px;
height: 162px;
border: 10px dotted green;
box-sizing: border-box;
word-wrap: break-word;
background-image: url("CSS-image-border-1.png");
background-repeat: no-repeat;
background-size: contain;
<!--背景图会延伸到border中-->
background-origin: border-box;
<!--裁剪掉延伸到border中的图形-->
background-clip: padding-box;
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
<hr>
<div id="d2">
www.qingsword.com
</div>
<hr>
</body>
</html>
显示效果：
www.qingsword.com
www.qingsword.com
i.background综合配置
上面所有的background子属性都可以一次性配置在background属性中，完整的格式如下：
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>背景综合配置实例</title>
<style type="text/css">
#d1{
width: 162px;
height: 162px;
color: green;
box-sizing: border-box;
word-wrap: break-word;
border: 1px dotted green;
padding: 20px;
<!--因为配置了图形在文字盒子内部绘制，所以最后clip属性就省略了-->
background:pink url("CSS-image-border-1.png") no-repeat scroll center / contain content-box;
}
</style>
</head>
<body>
<div id="d1">
www.qingsword.com
</div>
</body>
</html>
显示效果：
www.qingsword.com