【CSS3】边框

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
     <div></div>
 </body>
 </html>

 div{
     width: 100px;
     height: 100px;
     background: rgba(255,0,0,0.2);
     /*border:2px solid green;*//*类似padding * ** *** ****的设置规则*/
     border-width: 3px;/*单位px或em，可设this、medium、thick*/
     border-style:double;/*默认none无边框；dotted点状；dashed虚线；solid实线；double双线，至少3px才能看到效果；groove定义3D凹槽；ridge定义3D凸起；inset内凹；outset外凸*/
     border-color: green;
     /*border-bottom: 20px black solid;*/
     border-top: ;
     border-top-style:
     border-left: ;
     border-right: ;
     /*border-radius:1em/2em ;*//*圆角的半径：单位px、em；复合属性有类似padding *(上右下左) **(左右、上下) ***(上、左右、下) ****(同*)的规律。x向半径/y向半径*/
     border-top-left-radius: 1em;
     border-top-right-radius: 1em;
     border-bottom-left-radius: 1em;
     border-bottom-right-radius: 1em 4em;/*可设x半方向半径和y方向半径不等*/

     /*border-image:url(img/花3.jpg) 20 /1em /1em repeat;*//*复合属性多个值同时设置时width和outset值前要加/，否则无效*/
     /*border-image-source: url(img/花3.jpg);*/
     /*border-image-slice: 20;*/
     border-image-width:1em ;/*单位px、em*/
     border-image-outset:1em ;/*单位px、em*/
     border-image-repeat: round;/*默认stretch拉伸；repeat重复铺满，一张图片切成3×3的九宫格，四个角填充四个角，上下左右分别重复填充四个边；round重复铺满并对图片进行调整，上下左右填充四个边时如果出现半个则进行微调，保证不会出现半个图形*/
     /*border-image-slice: 20 fill;*//*fill的作用是使九宫格中间一格也填充区域*/
 }
 div{
     box-shadow: 2px 2px 1px 1px red,4px 4px 1px 1px blue;/*默认none无阴影；阴影水平偏移值正右负左，阴影垂直偏移值正下负上，阴影模糊度，阴影外延值，阴影颜色，内外阴影（inset，默认outset，在偏移量为0时outset省和不省效果有区别）*/
 }
 div:hover{
     box-shadow:
         0px 0px 1px 5px red,
         0px 0px 1px 10px green,
          0px 0px 1px 15px blue,
 }