在Web前端页面实现圆角效果，CSS3帮你轻松实现

最新推荐文章于 2024-11-13 16:50:05 发布

gonggz

最新推荐文章于 2024-11-13 16:50:05 发布

阅读量4.3k

点赞数

文章标签：效果设置边框颜色元素

本文链接：https://blog.csdn.net/gonggz/article/details/80132783

版权

CSS3 使用border-radius属性设置圆角效果

该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为：

none，默认值，表示元素没有圆角效果

length，由浮点数字和单位标识组成的长度值

%，由百分比设置的圆角值

该属性可以分别设置元素的四个圆角效果，采用下列格式来实现。

格式：border-radius: 左上角右上角右下角左下角;

通常，四个方向的角半径均采用length取值来实现，该取值必须为浮点数字和单位标识共同组成。同时规定，该取值不得取负数。

例1：利用整数来实现圆角取值。

div{

width: 200px; height: 150px;

border: solid 1px #aaaaaa;

border-radius: 10px 5px 10px 5px;

background-color: #ff5857;

}

上述实例设置了一个div块级元素，其宽度为200px，高度为150px。为了能够看到其圆角效果，增加了颜色为#ff5857的背景颜色，并且添加了1px大小的边框，其边框为实线，边框颜色为#aaaaaa。最后设置其圆角效果，左上角和右下角均为10px，右上角和左下角均为5px。
例2：查看下列CSS代码。

（1）border-radius: 10px 5px 15px 20px;
（2）border-radius: 10px 5px 15px;
（3）border-radius: 10px 5px;
（4）border-radius: 10px;

上述四组代码中，只有组（1）提供了完全符合格式的四个数据，其他三组均只提供了小于四个的数据。这种情况下，数据依然按照“左上角右上角右下角左下角”的顺序进行排列，没有涉及到的角方向按照其对角的圆角数据进行设置。

因此，组（2）的数据表示：左上角为10px，右上角为5px，右下角为15像素，左下角为右上角的像素设置，即5px。请同学们根据这样的方法，理解一下组（3）的圆角含义。

组（4）就设置了一个数据，这表示四个方向的角半径均为10px。

二、独立设置元素的四个圆角效果：
若只想设置一个块级元素右上角的圆角效果，该如何实现呢？这里W3C为border-radius属性派生出了表示四个方向的独立圆角效果的子属性。
border-top-left-radius, 定义左上角的圆角效果
border-top-right-radius, 定义右上角的圆角效果
border-bottom-right-radius, 定义右下角的圆角效果
border-bottom-left-radius, 定义左下角的圆角效果
上述四个子属性的取值规则和border-radius属性的取值规则是完全相同的。
例3：设置p标记的圆角效果，其中左下角没有圆角效果，其他三个方向角的圆角效果均为25px。

方法1：利用border-radius属性统一设置。

p{border-radius: 25px 25px 25px 0;}

方法2：利用border-radius属性的派生子属性设置。

border-top-left-radius: 25px;

border-top-right-radius: 25px;

border-bottom-right-radius: 25px;

}

方法3：利用border-radius属性设置所有角方向均为25px，再利用border-radius属性的派生子属性设置左下角没有圆角效果。

border-radius: 25px;

border-bottom-left-radius: none;

}
三、设置水平角半径和垂直角半径不同的圆角效果

W3C也提供了两个角半径不相同的圆角效果设置方式，这里依然以左上角为例，来展示两个角半径不同的设置方式。