您现在的位置是：首页 > 其他

当前栏目

图解css3：核心技术与案例实战. 3.4　CSS3圆角边框属性

技术浏览器

2023-03-09 22:20:55 时间

3.4　CSS3圆角边框属性

在Web页面上圆角效果很常见。圆角给页面增添曲线之美，让页面不那么生硬，但是为了设计圆角效果，Web设计师们要花费更多的时间与精力。

3.4.1　border-radius属性的语法及参数

CSS3中专门针对元素的圆角效果增加了一个圆角属性border-radius。Web设计师不会为Web页面中的圆角效果纠结了。

语法：

border-radius: none | <length> {1,4}[/<length>{1,4}] ?

border-radius是一种缩写方法。如果反斜杠符号“/”存在，“/”前面的值是设置元素圆角的水平方向半径，“/”后面的值是设置元素圆角的垂直方向的半径；如果没有“/”，则元素圆角的水平和垂直方向的半径值相等。另外四个值是按照top-left、top-right、bottom-right和bottom-left顺序来设置的，其主要会有以下四种情形出现。

1）border-radius:<length>{1}设置一个值，top-left、top-right 、bottom-right和bottom-left四个值相等，也就是元素四个圆角效果一样。

2）border-radius:<length>{2}设置两个值，top-left等于 bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二值。也就是元素的左上角和右下角取第一个值，右上角和左下角取第二个值。

3）border-radius:<length>{3}设置三个值，第一个值设置top-left，第二个值设置top-right和bottom-left，第三个值设置bottom-right。

4）border-radius:<length>{4}元素四个圆角取不同的值，第一个值设置top-left，第二个值设置top-right，第三个值设置bottom-right，最后一个值设置bottom-left。

border-radius的属性参数非常简单，主要包含两个值。

none：默认值，表示元素没有圆角。

<length>：由浮点数字和单位标识符组成的长度值。不可以是负值。

注

意如果要重置元素没有圆角，取值none并无效果，需要将元素的border-radius取值为0。

border-radius和border属性一样，可以将各个角单独拆分出来。这样border-radius就派生出另外四个子属性，而且它们都是先Y轴再X轴。

border-top-left-radius：<length>/<length>；定义元素左上角圆角。

border-top-right-radius：<length>/<length>；定义元素右上角圆角。

border-bottom-right –radius ：<length>/<length>；定义元素右下角圆角。

border-bottom-left-radius：<length>/<length>；定义元素左下角圆角。

上面四个子属性取值和border-radius是一样的，只不过水平和垂直方向仅一个值，“/”前面的值为水平方向半径，后面的值为垂直方向半径。如果第二个值省略，元素水平和垂直方向半径，其实就是以“<length>”为半径的四分之一圆。如果任意一个值为“0”，这个角就不是圆角。

由于各浏览器厂商对border-radius子属性解析不一致，造成了各浏览器下的border-radius属性的派生子属性写法有所区别。

1）Gecko内核浏览器（Firefox、Flock等）。

-moz-border-radius-topleft:<length>/<length>; 左上角圆角

-moz-border-radius-topright:<length>/<length>; 右上角圆角

-moz-border-radius-bottomright:<length>/<length>; 右下角圆角

-moz-border-radius-bottomleft:<length>/<length>; 左下角圆角

2）Webkit内核浏览器（Chrome、Safari等）。

-webkit-border-top-left-radius：<length>/<length>; 左上角圆角

-webkit-border-top-right-radius：<length>/<length>; 右上角圆角

-webkit-border-bottom-right-radius：<length>/<length>; 右下角圆角

-webkit-border-bottom-left-radius：<length>/<length>; 左下角圆角

3）Presto和Trident内核浏览器（Opera、IE 9+等）。

border-top-left-radius：<length>/<length>; 左上角圆角

border-top-right-radius：<length>/<length>; 右上角圆角

border-bottom-right-radius：<length>/<length>; 右下角圆角

border-bottom-left-radius：<length>/<length>; 左下角圆角

border-radius派生的子属性虽然方便为元素设置指定角的圆角，但为了兼容各浏览器的新老版本写法，不得为样式增加额外的代码。

/*Firefox浏览器*/

-moz-border-radius-topleft: <length>/<length>; 右上角圆角

-moz-border-radius-topright: <length>/<length>; 右上角圆角

-moz-border-radius-bottomright: <length>/<length>; 右下角圆角

-moz-border-radius-bottomleft: <length>/<length>; 左下角圆角

/*Chrome和Safari浏览器*/

-webkit-border-top-left-radius: <length>/<length>; 左上角圆角

-webkit-border-top-right-radius: <length>/<length>; 右上角圆角

-webkit-border-bottom-right-radius: <length>/<length>; 右下角圆角

-webkit-border-bottom-left-radius: <length>/<length>; 左下角圆角

/*Opera、IE 9+、W3C标准写法*/

border-top-left-radius: <length>/<length>; 左上角圆角

border-top-right-radius: <length>/<length>; 右上角圆角

border-bottom-right-radius: <length>/<length>; 右下角圆角

border-bottom-left-radius: <length>/<length>; 左下角圆角

这样给元素设置单个圆角效果是件非常痛苦的事情，而且难以维护，也容易出错。其实给元素设置单个圆角效果，完全可以借助border-radius属性的标准写法，只是需要将其他顶边的圆角半径值设置为0。例如，只要给元素左上角设置圆角效果。

border-radius: 5px 0 0 0;/*左上角设置圆角*/

3.4.2　border-radius属性使用方法

前面了解了border-radius的语法，同时知道border-radius属性可以包含两个参数值，第一个是水平圆角半径值，第二个是垂直圆角半径值，而且两个参数值使用“/”分开，如图3-21所示。

1．水平和垂直半径一样

通过一些简单的示例代码进一步加强对border-radius的理解。

1）border-radius只设置一个值。

<!DOCTYPE HTML>

<head>

<title>CSS3的border-radius制作圆角</title>

.border-radius {

width: 250px;

height: 100px;

border: 10px solid orange;

border-radius: 10px;

}

</style>

</head>

<body>

</body>

</html>

此时，元素四个角都具有圆角，而且圆半径值一样，效果也一样，如图3-22所示。

2）border-radius设置两个值。

.border-radius {

width: 350px;

height: 100px;

border: 10px solid orange;

border-radius: 10px 30px;

}

此时top-left等于bottom-left并且它们取第一个值10px；top-right等于bottom-left并且取第二个值30px。即元素左上角和右下角圆角相同，其圆角半径值为10px，而元素右上角和左下角圆角相同，其圆角半径值为30px，如图3-23所示。

3）border-radius设置三个值。

.border-radius {

width: 350px;

height: 100px;

border: 10px solid orange;

border-radius: 10px 50px 30px;

}

此时top-left取第一个值10px，top-right和bottom-left圆角效果一样，取第二个值50px，bottom-right取第三个值30px，如图3-24所示。

图3-23　border-radius取两个值的图3-24　border-radius取三个值时圆角边框效果圆角边框效果

4）border-radius设置四个值。

.border-radius {

width: 350px;

height: 100px;

border: 10px solid orange;

border-radius: 10px 20px 30px 40px;

}

此时，左上角取第一个参数值10px，右上角取第二个参数值20px，右下角取第三个参数值30px，左下角取第四个参数值40px；如果四个值不相同时，意味着元素的四个顶角的圆角效果都不一样，如图3-25所示。

2．单独设置水平和垂直半径值

上面展示的是border-radius设置圆角的水平和垂直半径都是一样的，不过前面介绍过，border-radius设置圆角时，可以把圆角的水平和垂直半径值单独设置，此时就需要使用以“/”来区别。“/”前面的表示圆角的水平半径，而“/”后面的值表示圆角的垂直半径。一起来看一个简单的实例，设置不规则圆角边框。

.border-radius {

width: 350px;

height: 100px;

border: 10px solid orange;

border-radius: 60px 40px 30px 20px / 30px 20px 10px 5px;

}

border-radius设置水平/垂直两个半径参数时，元素的每个角不是四分之一圆角，得到的圆角效果是不规则的。元素左上角的是一个水平半径为60px，垂直半径为30px的不规则圆角；右上角是一个水平半径为40px，垂直半径为20px的不规则圆角；右下角是一个水平半径为30px，垂直半径为10px的不规则圆角；左下角是一个水平半径为20px，垂直半径为5px的不规则圆角，如图3-26所示。

图3-25　border-radius设置四个值的图3-26　border-radius设置不规则圆角边框效果圆角边框效果

其实border-radius的水平和垂直半径也遵循前面介绍的规则，可以设置1～4个值的集合，同时它们分别遵循CSS赋值规则。但分开设置元素各个顶角的圆角的水平和垂直半径圆角效果时，不需要“/”，如下所示。

border-top-left-radius: 10px 50px;

border-top-right-radius: 20px 60px;

border-bottom-left-radius: 20px 60px;

border-bottom-right-radius: 30px 50px;

如果加上反而是一种错误的写法。

border-top-left-radius: 10px / 50px;

border-top-right-radius: 20px / 60px;

border-bottom-left-radius: 20px / 60px;

border-bottom-right-radius: 30px / 50px;

3．制作单个圆角边框

使用border-radius可以给元素设置圆角边框，还可以使用border-radius的派生子属性来定义元素的圆角边框效果。

要给元素设置单个圆角效果，不一定需要使用border-radius派生的子属性，完全可以使用下面的方法来替代。

border-radius: 50px 0 0 0;

上面的代码就是给元素设置了一个左上角圆角边框效果，其效果等同于：

-moz-border-radius-topleft: 50px;

-webkit-border-top-left-radius: 50px;

border-top-left-radius: 50px;

这两种方法制作出来的效果都是一样的，如图3-27所示。

4．特殊应用

前面所了解的都是border-radius一些常见的运用，其实border-radius还有几个特殊的应用。

1）border-radius还有一个内半径和外半径的区别，元素边框值较大时，效果就很明显。当border-radius半径值小于或等于border的厚度时，元素边框内部就不具有圆角效果。如：

.border-radius {

width: 350px;

height: 100px;

border: 30px solid orange;

border-radius: 30px;

}

效果如图3-28所示。

图3-27　border-radius制作单个圆角边框效果图3-28　圆角半径等于边框厚度时效果

在这个基础上，把圆角半径值调大些，比边框值大。

.border-radius {

width: 350px;

height: 100px;

border: 30px solid orange;

border-radius: 35px;

}

这个时候内圆角就出来了，如图3-28所示。

为何当border-radius的半径小于或等于元素的边框厚度时，内部是直角效果？因为border-radius内边半径（内径）等于外边半径（外径）减去对应的边框宽度。

border-radius半径值与border-width值等于或小于0时，元素内角为直角，如图3-28所示。

border-radius半径值与border-width值大于0时，元素内角具有圆角效果，其圆角半径为它们的差值。差值越大，圆角幅度也大，反之圆角幅度也小，如图3-29所示。

2）第二种特殊应用是，元素相邻边有不同的宽度，这个角将会从宽的边平滑过渡到窄的一边，其中一条边甚至可以是0，元素相邻转角是由大向小转。例如：

.border-radius {

width: 350px;

height: 100px;

border: 30px solid orange;

border-width: 20px 5px 30px 60px;

border-radius: 100px;

}

效果如图3-30所示。

图3-29　圆角半径大于边框厚度时效果图3-30　元素相邻转角是由大向小转效果

当元素相邻两条边颜色和线条样式不同时，两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。如果两条边宽度相同，这个临界点应该在一个45度角上，如果一条边是另外一条边的2倍，这个临界点就在一个30度角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。一起来看个示例，给元素四边设置不同的颜色和宽度。

.border-radius {

width: 350px;

height: 100px;

border: 30px solid orange;

border-width: 35px 35px 60px 30px;

border-color: orange red green blue;

border-radius: 80px;

}

效果如图3-31所示。

5．图片应用圆角

border-radius能应用在各个元素中，但在img和table应用时会有点差别的，首先看图片上应用border-radius时的情况。在img上应有用border-radius到目前只有在Webkit内核浏览器不能对图片进行剪切，来看一个图片应用圆角的实例。

<!DOCTYPE HTML>

<head>

<title>图片上的圆角应用</title>

img {

border: 5px solid red;

border-radius: 10px;

}

</style>

</head>

<body>

</body>

</html>

各浏览器下图片圆角效果如图3-32所示。

图3-32　各浏览器下图片圆角效果

正如图3-32效果所示，图片在Webkit内核浏览器（例如Chrome、Safari）下根本没有圆角效果，图片不会被圆角剪切。如果需要让浏览器达到一致效果，可以把图片转换成元素的背景图片，然后再给元素定义圆角效果。这时需要借助jQuery来实现。例如：

$("img").load(function(){

$(this).wrap(function(){

return '<span class="' + $(this).attr('class') + '" style="background:url(' +

$(this).attr('src') + ') no-repeat center center; width: ' +

$(this).width() + 'px; height: ' + $(this).height() + 'px;"></span>';

});

(this).css("opacity","0");

});

详细的解决方案可以参考http://www.w3cplus.com/css3/jquery-css3-rounded-image。

6．表格应用圆角

另外表格元素table使用border-radius是不一样的，当表格样式属性border-collapse是collapse时，表格不能正常显示，只有border-collapse属性值为separate时，表格圆角才能正常显示。例如：

<!DOCTYPE HTML>

<head>

<title>表格的圆角应用</title>

table {

margin: 10px;

border:5px solid orange;

border-radius: 10px;

}

.table1 {

border-collapse: collapse;

}

.table2 {

border-collapse: separate;

}

</style>

</head>

<body>

<tr>

<td>border-collapse:collapse</td>

</tr>

</table>

<tr>

<td>border-collapse:separate</td>

</tr>

</table>

</body>

</html>

效果如图3-33所示。

图3-33　各浏览器下表格圆角边框效果

3.4.3　浏览器兼容性

目前，border-radius属性除了IE老版本之外的浏览器都得到了较好的支持，如IE 9+、Firefox 4+、Chrome 5+、Safari 5+、Opera 10.5+版本都支持border-radius的标准写法。如果需要支持一些老版本，还要添加各浏览器的私有前缀，如Firefox 3、Chrome 4、Safari 3.1～4。而IE 8及其以下版本的浏览器不支持border-radius属性，如表3-6所示。

表3-6　border-radius浏览器兼容性

属性名

border-radius 9 +√ 3.0 +√ 1.0 +√ 10.5 +√ 3.0 +√

CSS3的border-radius属性目前在Web中的使用随处可见，特别是国外的Web运用上，国内很多Web设计师也逐渐在使用。在IE 低版本浏览器下，Web设计师可以采用以下方案来处理兼容性。

使用第三方插件，例如IE -css3.js、PIE 或者其他JavaScript脚本插件。

采用渐近增强，在不支持border-radius属性的浏览器采用另一套样式，也就是CSS2中的图片实现圆角方法优雅降级，在不支持border-radius的浏览器默认显示直角。

3.4.4　border-radius属性的优势

使用CSS来实现宽度固定的圆角效果，采用背景图片配合滑动门技术实现还是一种不错的方法。但是，如果想要一个宽度不固定的元素就变得复杂了。宽度不定，就意味着这个元素在水平和垂直方向都能灵活地变化。实现元素四个圆角效果，就需要制作四个圆角背景图片，并且进行合理的放置，这样还需要添加四个额外的标签来辅助完成。当然还可以制作两个超大、超宽的背景图片，这个方法虽然减少了两张背景图片，以及四个HTML标签，但另一个问题又随之产生，图片尺寸过大增加了图片载入的难度，直接影响了网站的性能。如果使用CSS3的border-radius属性制作圆角，就不需考虑元素是否可以自由扩展，同时也不需要为了实现圆角制作不同的圆角背景图片，从而获得了极大的灵活性、维护性。

使用CSS3的border-radius属性来代替CSS之前使用图片制作圆角，在部分不支持border-radius的浏览器上，牺牲了一点效果的一致性，但这不是问题。我们所做的是一种渐进增强，一种优雅降级，即使用圆角的元素在不支持CSS3的border-radius属性的浏览器下完全有效果且易读，只不过在支持的浏览器下，使用border-radius的元素会更美观，视觉效果更细腻圆润。你或者客户希望在所有浏览器下能达到一样的圆角效果，可以考虑这样的实现方法：“在支持的浏览器下使用CSS3的border-radius属性，而在不支持的浏览器下，可以考虑图片，或者第三方插件的方法来实现”。

3.4.5　实战体验：制作特殊图形

border-radius属性除了可以实现元素的圆角效果，还可以制作一些特殊的图形效果，如圆形、半圆形、扇形、椭圆形和不规则的圆角图形等。

1．圆形

border-radius制作圆角有两点技巧。

元素的宽度和高度相同。

圆角的半径值为元素宽度或宽度的一半或者直接设置圆角半径值为50%。

不过早期的Webkit内核浏览器不支持百分比值。例如：

div {

width: 100px;

height: 100px;

background-color: orange;

border-radius: 50%;

}

效果如图3-34所示。

2．半圆

border-radius制作半圆与制作圆形的方法是一样的，只是元素的宽度与圆角方位要配合一致，不同的宽度和高度比例，以及圆角方位，可以制作上半圆、下半圆、左半圆和右半圆效果。例如：

.semicircle {

background-color: orange;

margin: 30px;

}

.top {

width: 100px;/*宽度为高度的2倍*/

height: 50px;

border-radius: 50px 50px 0 0;/*圆角半径为高度的值*/

}

.right {

height: 100px;/*高度为宽度的2倍*/

width: 50px;

border-radius: 0 50px 50px 0;/*圆角半径为宽度的值*/

}

.bottom {

width: 100px;/*宽度为高度的2倍*/

height: 50px;

border-radius: 0 0 50px 50px;/*圆角半径为高度的值*/

}

.left {

width: 50px;

height: 100px;/*高度为宽度的2倍*/

border-radius: 50px 0 0 50px;/*圆角半径为宽度的值*/

}

效果如图3-35所示。

border-radius制作半圆有两个小技巧：

制作上半圆或下半圆，元素的宽度值是高度值的2倍，而且圆角半径值为元素的高度值；

制作左半圆或右半圆，元素的高度值是宽度值的2倍，而且圆角半径值为元素的宽度值。

3．扇形

border-radius制作扇形，其实就是使用border-radius属性制作四分之一圆形。遵循“三同，一不同”原则，其中“三同”是指元素的宽度、高度和圆角半径值相同，而“一不同”指的是圆角位置不同。根据圆角取值位置不一样，可以分左上、右上、右下和左下四种扇形效果。例如：

.quarterCircle {

background-color: orange;

margin: 30px;

}

.top {

width: 100px;

height: 100px;

border-radius: 100px 0 0 0;

}

.right {

width: 100px;

height: 100px;

border-radius: 0 100px 0 0;

}

.bottom {

width: 100px;

height: 100px;

border-radius: 0 0 100px 0;

}

.left {

width: 100px;

height: 100px;

border-radius: 0 0 0 100px;

}

效果如图3-36所示。

4．椭圆

椭圆其实就是一个圆形受到挤压而成的一种形状，border-radius制作椭圆也非常方便，只受限于元素的宽度或高度，然后就是圆角半径，制作椭圆的圆角半径和其他图形有所不一样，需要设置圆角的水平和垂直方向的半径值。椭圆有两种，一种是水平的，另外一种是垂直的。它们之间的差别只是方向性的区别，其制作方法是一样的。

制作水平椭圆，元素宽度是高度的2倍，而且border-radius的水平半径等于元素宽度，垂直半径等于元素高度；而垂直椭圆刚好与水平椭圆的参数相反。例如：

.oval {

background-color: orange;

margin: 30px;

}

.hov {

width: 100px;

height: 50px;

border-radius: 100px / 50px;

}

.ver {

width: 50px;

height: 100px;

border-radius: 50px / 100px;

}

效果如图3-37所示。

图3-37　border-radius制作椭圆

上面几个小案例都是使用border-radius配合元素的其他属性实现不同的图形效果，也可以使用border-radius制作更多的图形效果（或者说圆角效果）来适合项目需求。

猜你喜欢

鲜为人知但很有用的 HTML 属性
在 Go 里用 CGO？这 7 个问题你要关注！
数据孤岛是业务效率的无声杀手
9款优秀的去中心化通讯软件 Matrix 的客户端
翻转再翻转！有意思的水平横向溢出滚动
发现 Linux SpaceFM 文件管理器的威力
图像处理工具Python扩展库，你了解吗？
求职数据分析，项目经验该怎么写
自定义计数器小技巧！CSS 实现长按点赞累加动画
在OKR中，我看到了数据驱动业务的未来
2023展望：新的一年将给大数据分析领域带来什么？
过五关！React高频面试题指南
阿里云ADB基于Hudi构建Lakehouse的实践
火山引擎云原生大数据在金融行业的实践
OpenHarmony富设备移植指南（二）—从postmarketOS获取移植资源
《数据成熟度指数》报告：64%的企业领袖认为大多数员工“不懂数据”
OpenHarmony 小型系统兼容性测试指南
肯睿中国（Cloudera）：2023年企业数字战略三大趋势预测
适用于 Linux 的十大命令行游戏
软件开发中的十个认知偏差

zl程序教程

当前栏目

图解css3：核心技术与案例实战. 3.4　CSS3圆角边框属性

相关文章

当前栏目

图解css3：核心技术与案例实战. 3.4 CSS3圆角边框属性

相关文章

图解css3：核心技术与案例实战. 3.4　CSS3圆角边框属性