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-边框宽度;*/ 12 /*border-left-color:左边框颜色;*/ 13 /*border-left-style:左边框样式;*/ 14 /*border-left-左边框宽度;*/ 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>