1 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 .box1{ 9 width:100px; 10 height:100px; 11 background-color:#bfa; 12 padding:10px; 13 14 /* 15 box-shadow用来设置元素的阴影效果，阴影不会影响页面布局 16 第一个值:水平偏移量 设置阴影的水平位置 17 第二个值:垂直偏移量 设置阴影的垂直位置 18 第三个值:阴影的迷糊半径 19 第四个值:阴影的颜色 20 */ 21 box-shadow:0px 0px 50px rgba(0,0,0,.5) 22 23 24 /* 25 26 outline 用来设置元素的轮廓线和border的用法一样 27 不同点：轮廓不会影响页面的布局 28 */ 29 } 30 .box2{ 31 width:100px; 32 height:100px; 33 background-color:orange; 34 35 /* 36 border-radius用来设置圆角 37 border-top-left-radius 38 border-top-right-radius 39 border-bottom-left-radius 40 border-bottom-right-radius 41 border-radius 可以指定四个圆角的圆角 42 -四个值：左上，右上，右下，左下 43 -三个值左上，右上/左下，右下 44 -两个值:左上右下，右上左下 45 (对角的公用) 46 */ 47 48 @sC/* 49 border-radius:10px / 40px;; 50 将元素设置为一个圆形】 51 */ 52 border-radius:50%; 53 54 } 55 </style> 56 </head> 57 <body> 58 <div class="box1"></div> 59 <div class="box2"></div> 60 </body> 61 </html>