第二节 css3动画之圆角 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .box{
 8             width: 300px;
 9             height: 300px;
10             background-color: gold;
11             margin: 50px auto 0;
12             border-top-left-radius: 60px;
13             border-top-left-radius: 60px 30px;
14             /* border-top-left 这种形式表示左上角，可以给两个值，画出的边不一样，也可以只给一个值 */
15 
16             border-radius: 50%;  /* 和下面的一样，都是画圆*/
17             border-radius: 150px;
18         }
19 
20 
21     </style>
22 </head>
23 <body>
24     <div class="box"></div>
25 </body>
26 </html>

 

posted @ 2020-03-14 15:35  kog_maw  阅读(184)  评论(0)    收藏  举报