CSS-08-边框属性设置 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             /*CSS边框属性*/
 8             /*border:宽度  样式  颜色;三个值一个都不能丢*/
 9             /*border-color:颜色;*/
10             /*border-style:边框样式;solid实线,dotted点状线,dashed虚线;*/
11             /*border-width:边框宽度;*/
12             /*border-left-color:左边框颜色;*/
13             /*border-left-style:左边框样式;*/
14             /*border-left-width:左边框宽度;*/
15             /*border-radius:圆角角度;*/
16             /*box-shadow:x轴偏移  y轴偏移 模糊度  扩散程度   颜色   inset内阴影;设置或检索阴影*/
17             .border{
18                 width: 200px;
19                 height: 200px;
20                 border: 2px solid blueviolet;
21                 border-radius:10% 20% 30% 50%;
22                 box-shadow:10px 10px 10px 10px darkblue inset;
23             }
24             .border:hover{
25                 width: 200px;
26                 height: 200px;
27                 border: 2px solid blueviolet;
28                 border-radius:0%;
29                 box-shadow:10px 10px 20px 10px #ccc;
30             }
31         </style>
32     </head>
33     <body>
34         <div class="border"></div>
35     </body>
36 </html>

 

posted @ 2019-07-27 13:21  我只是一个码农  阅读(311)  评论(0)  编辑  收藏  举报