css3实现半圆和圆效果
程序员文章站
2024-01-26 20:50:10
border-radius 不但可以定义圆半径和圆角大小，还可以画出各种方向的半圆。 ......
在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>
效果如下：
上一篇： Python之assert断言语句
下一篇： 1-2 图片批量裁剪