背景：
可定义多个背景图片
<html>
<head>
<title>练习</title>
<style type="text/css">
body{
background:url(IMG_20201102_205532.png) 120px 110px no-repeat,
url(1604321074680.jpg)40px 10px no-repeat,
url(IMG_20201102_150726.jpg)no-repeat;
}
</style>
</head>
<body>
</body>
</html>
指定背景的原点位置：
<html>
<head>
<title>练习</title>
<style type="text/css">
div{
padding: 50px;
border: 50px solid rgba(255, 1512,0 ,0.6);
height: 100px;
width: 200px;
color: #fff;
font-size: 24px;
font-weight: bold;
text-shadow: 2px 0 1px #f00 , -2px 0 1px #f00, 0 2px 1px #f00,0 -2px 1px #f00;
background-image: url(1604321074680.jpg);
background-position: 0 0;
background-repeat: no-repeat;
-webkit-background-origin: border-box;
-moz-background-origin: border-box;
background-origin: border-box;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
可以修改代码,把border-box改成padding-box，结果如下：
把border-box改成content-box，结果如下：
边框：
<html>
<head>
<title>练习</title>
<style type="text/css">
div{
height: 80px;
width: 200px;
background-color: #fe0;
border: 10px solid #f90;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>结果：
