在 CSS2 中, 如果需要失效一些圆角或者半圆等等效果, 一般是要通过 ps 等软件来处理的, 在 CSS3 中, 则不需要了, 只需要通过 border-radius 就可以实现, 大大方便了开发的效率.
无论圆角, 圆弧, 实心圆, 半圆, css3 的实现代码都是 border-radius 属性, border-radius 不但可以定义圆半径和圆角大小, 还可以画出各种方向的半圆.
代码
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- CSS3
- </title>
- <style>
- *{margin:0;padding:0;} ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;text-align:center;}
- li{background:red;} .circle1{width:100px;height:50px;border-radius:50px
- 50px 0 0;line-height:50px;} .circle3{width:100px;height:50px;border-radius:0
- 0 50px 50px;line-height:50px;} .circle2{width:50px;height:100px;border-radius:0
- 50px 50px 0;line-height:100px;} .circle4{width:50px;height:100px;border-radius:
- 50px 0 0 50px;line-height:100px;} .circle5{width:100px;height:100px;border-radius:
- 50px;line-height:100px;}
- </style>
- </head>
- <body>
- <ul>
- <li class="circle1">
- 上边圆
- </li>
- <li class="circle2">
- 左边圆
- </li>
- <li class="circle3">
- 下边圆
- </li>
- <li class="circle4">
- 左边圆
- </li>
- <li class="circle5">
- 全圆
- </li>
- </ul>
- </body>
- </HTML>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频
效果如下:
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/59a98b076644