CSS 圆角
css的border-radius属性可以实现圆角、圆形、椭圆形。
实现上述圆角的前提是盒子要有边框。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。规则圆角
下面的示例演示了圆角、赛道、圆形，我们先看效果图。
下面是实现的代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >圆角</ title > < style > div{ margin:20px; } div.one{ width:50px; height:50px; border:1px solid #333; border-radius:7px; } div.two { width:120px; height:50px; border:1px solid #333; border-radius:50px; } div.three { width:120px; height:120px; border:1px solid #333; border-radius:120px; } </ style > </ head > < body > < h1 >利永贞网</ h1 > < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 > < div class = "one" ></ div > < div class = "two" ></ div > < div class = "three" ></ div > </ body > </ html > |
下面来说明border-radius属性：
- 它的值 最大是盒子的最小边长，如第二个图形，最小边长是50px高，不管border-radius属性的值是200，还是500，border-radius属性的值最终都是50px，即盒子的最小边长高的那边50px.
- border-radius 在指定一个值是，它指的是4个角的值。包括：
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-top-left-radius
不规则圆角
通过为4个不同的角设置不同的值可以实现不对称的形状。
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-top-left-radius
这4个属性同时有两个值，如果指定一个值，那么两个值都相同。
示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >圆角</ title > < style > div{ margin:20px; } div.one{ width:50px; height:50px; border:1px solid #333; border-radius:1em 2em 1em 2em; } div.two { width:120px; height:50px; border:1px solid #333; border-radius:1em 4em 1em 2em / 2em 1em 2em 1em; } div.three { width:120px; height:120px; border:1px solid #333; border-top-right-radius: 120px 30px; border-top-left-radius:70px 50px; } </ style > </ head > < body > < h1 >利永贞网</ h1 > < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 > < div class = "one" ></ div > < div class = "two" ></ div > < div class = "three" ></ div > </ body > </ html > |
计算结果：
更多精彩
