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>
巴特西

CSS轮廓和圆角

最新文章

热门文章
