css3实现半圆和圆效果_温瞳_前端开发者

  在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率。

  无论圆角、圆弧、实心圆、半圆,css3的实现代码都是 border-radius 属性,border-radius 不但可以定义圆半径和圆角大小,还可以画出各种方向的半圆。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>CSS3</title>
 7     <style>
 8         *{margin:0;padding:0;}
 9         ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;text-align:center;}
10         li{background:red;}
11          .circle1{width:100px;height:50px;border-radius:50px 50px 0 0;line-height:50px;}
12          .circle3{width:100px;height:50px;border-radius:0 0 50px 50px;line-height:50px;}
13          .circle2{width:50px;height:100px;border-radius:0 50px 50px 0;line-height:100px;}
14          .circle4{width:50px;height:100px;border-radius: 50px 0 0 50px;line-height:100px;}
15          .circle5{width:100px;height:100px;border-radius: 50px;line-height:100px;}
16     </style>
17 </head>
18 <body>
19     <ul>
20         <li class="circle1">上边圆</li>
21         <li class="circle2">左边圆</li>
22         <li class="circle3">下边圆</li>
23         <li class="circle4">左边圆</li>
24         <li class="circle5">全圆</li>
25     </ul>
26 </body>
27 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>CSS3</title>
 7     <style>
 8         *{margin:0;padding:0;}
 9         ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;text-align:center;}
10         li{background:red;}
11          .circle1{width:100px;height:50px;border-radius:50px 50px 0 0;line-height:50px;}
12          .circle3{width:100px;height:50px;border-radius:0 0 50px 50px;line-height:50px;}
13          .circle2{width:50px;height:100px;border-radius:0 50px 50px 0;line-height:100px;}
14          .circle4{width:50px;height:100px;border-radius: 50px 0 0 50px;line-height:100px;}
15          .circle5{width:100px;height:100px;border-radius: 50px;line-height:100px;}
16     </style>
17 </head>
18 <body>
19     <ul>
20         <li class="circle1">上边圆</li>
21         <li class="circle2">左边圆</li>
22         <li class="circle3">下边圆</li>
23         <li class="circle4">左边圆</li>
24         <li class="circle5">全圆</li>
25     </ul>
26 </body>
27 </html>

1 2en 3 4UTF-8 5viewportwidth=device-width, initial-scale=1.0 6 7 800;}
9floatalign:center;}
10 li{background:red;}
1100height:50px;}
1200height:50px;}
1300height:100px;}
1400height:100px;}
15height:100px;}
1617181920classcircle121classcircle222classcircle323classcircle424classcircle5252627

  效果如下:

» 本文来自:前端开发者 » 《css3实现半圆和圆效果_温瞳_前端开发者》
» 本文链接地址:https://www.rokub.com/73338.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!