1、与背景相关的新增属性
包括：backgroud-clip，backgroud-origin，backgroud-size
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: black;
border:dashed 15px green;
padding:30px;
color:white;
font-size: 30px;
font-weight: bold;
}
.div1{
/*黑色部分从border开始绘制*/
background-clip: border-box;
}
.div2{
/*黑色部分从padding开始绘制*/
background-clip: padding-box;
margin-top:40px;
}
.div3{
/*黑色部分从content开始绘制*/
background-clip: content-box;
margin-top:40px;
}
</style>
</head>
<body>
<div class="div1">示例1</div>
<div class="div2">示例2</div>
<div class="div3">示例3</div>
</body>
</html>
2、在一个元素中显示多个背景图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-image:url("1.jpg"),url("2.jpg") ;
background-repeat:repeat-x,no-repeat;
background-position: 100%,100%,center,center;
width:600px;
height:400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3、圆角边框的绘制
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: green;
border:3px solid #000;
width: 300px;
height: 200px;
padding:20px;
border-radius: 20px 30px 10px 50px;
/*左上角，右上角，右下角，左下角*/
/*值越大，角越圆*/
}
</style>
</head>
<body>
<div>
示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字
</div>
</body>
</html>
4、使用图像边框
让边框跟随内容部分*调整大小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
-webkit-border-image:url("1.jpg")50 50 50 60;
width: 200px;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>