1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div></div> 10 </body> 11 </html>
1 div{ 2 width: 100px; 3 height: 100px; 4 background: rgba(255,0,0,0.2); 5 /*border:2px solid green;*//*类似padding * ** *** ****的设置规则*/ 6 border-width: 3px;/*单位px或em，可设this、medium、thick*/ 7 border-style:double;/*默认none无边框；dotted点状；dashed虚线；solid实线；double双线，至少3px才能看到效果；groove定义3D凹槽；ridge定义3D凸起；inset内凹；outset外凸*/ 8 border-color: green; 9 /*border-bottom: 20px black solid;*/ 10 border-top: ; 11 border-top-style: 12 border-left: ; 13 border-right: ; 14 /*border-radius:1em/2em ;*//*圆角的半径：单位px、em；复合属性有类似padding *(上右下左) **(左右、上下) ***(上、左右、下) ****(同*)的规律。x向半径/y向半径*/ 15 border-top-left-radius: 1em; 16 border-top-right-radius: 1em; 17 border-bottom-left-radius: 1em; 18 border-bottom-right-radius: 1em 4em;/*可设x半方向半径和y方向半径不等*/ 19 20 /*border-image:url(img/花3.jpg) 20 /1em /1em repeat;*//*复合属性多个值同时设置时width和outset值前要加/，否则无效*/ 21 /*border-image-source: url(img/花3.jpg);*/ 22 /*border-image-slice: 20;*/ 23 border-image-width:1em ;/*单位px、em*/ 24 border-image-outset:1em ;/*单位px、em*/ 25 border-image-repeat: round;/*默认stretch拉伸；repeat重复铺满，一张图片切成3×3的九宫格，四个角填充四个角，上下左右分别重复填充四个边；round重复铺满并对图片进行调整，上下左右填充四个边时如果出现半个则进行微调，保证不会出现半个图形*/ 26 /*border-image-slice: 20 fill;*//*fill的作用是使九宫格中间一格也填充区域*/ 27 } 28 div{ 29 box-shadow: 2px 2px 1px 1px red,4px 4px 1px 1px blue;/*默认none无阴影；阴影水平偏移值正右负左，阴影垂直偏移值正下负上，阴影模糊度，阴影外延值，阴影颜色，内外阴影（inset，默认outset，在偏移量为0时outset省和不省效果有区别）*/ 30 } 31 div:hover{ 32 box-shadow: 33 0px 0px 1px 5px red, 34 0px 0px 1px 10px green, 35 0px 0px 1px 15px blue, 36 }