CSS轮廓和圆角 

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>

 

posted @ 2020-11-13 20:41  zou-ting-rong  阅读(197)  评论(0)  编辑  收藏  举报