【CSS3】边框 

 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 }

 

posted @ 2017-04-24 21:06  xiongjiawei  阅读(132)  评论(0)    收藏  举报