[CSS3] 学习笔记-背景与边框相关样式

1、与背景相关的新增属性

包括:backgroud-clip,backgroud-origin,backgroud-size

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             background-color: black;
 9             border:dashed 15px green;
10             padding:30px;
11             color:white;
12             font-size: 30px;
13             font-weight: bold;
14         }
15         .div1{
16             /*黑色部分从border开始绘制*/
17             background-clip: border-box;
18         }
19         .div2{
20             /*黑色部分从padding开始绘制*/
21             background-clip: padding-box;
22             margin-top:40px;
23         }
24         .div3{
25             /*黑色部分从content开始绘制*/
26             background-clip: content-box;
27             margin-top:40px;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="div1">示例1</div>
33     <div class="div2">示例2</div>
34     <div class="div3">示例3</div>
35 </body>
36 </html>

 

2、在一个元素中显示多个背景图片

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             background-image:url("1.jpg"),url("2.jpg") ;
 9             background-repeat:repeat-x,no-repeat;
10             background-position: 100%,100%,center,center;
11             width:600px;
12             height:400px;
13         }
14     </style>
15 </head>
16 <body>
17     <div></div>
18 </body>
19 </html>

 

3、圆角边框的绘制

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             background-color: green;
 9             border:3px solid #000;
10             width: 300px;
11             height: 200px;
12             padding:20px;
13             border-radius: 20px 30px 10px 50px;
14             /*左上角,右上角,右下角,左下角*/
15             /*值越大,角越圆*/
16         }
17     </style>
18 </head>
19 <body>
20     <div>
21         示例文字示例文字示例文字示例文字
22         示例文字示例文字示例文字示例文字
23         示例文字示例文字示例文字示例文字
24         示例文字示例文字示例文字示例文字
25     </div>
26 </body>
27 </html>

 

4、使用图像边框

让边框跟随内容部分自由调整大小

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             -webkit-border-image:url("1.jpg")50 50 50 60;
 9             width: 200px;
10         }
11     </style>
12 </head>
13 <body>
14     <div>示例文字</div>
15 </body>
16 </html> 

你可能感兴趣的:([CSS3] 学习笔记-背景与边框相关样式)