CSS圆角边框

最新推荐文章于 2023-07-07 09:07:25 发布

原创最新推荐文章于 2023-07-07 09:07:25 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

css 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了CSS3的border-radius属性，用于为元素添加圆角效果。通过设置不同的参数，可以实现四个圆角分别设置，创建圆形或椭圆形边角。例如，使用单一值为所有角设定相同圆角，或者用四个值分别指定左上、右上、右下和左下角的圆角大小。此外，通过设置border-radius为元素宽度的一半，可以创建完美的圆形。同时，文章还提及了如何定义椭圆边角的方法。

一、 border-radius 属性

使用 CSS3 border-radius 属性，可以给元素制作 “圆角”。

若 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

如下所示，则该元素的四个角都是圆角。

div{
    border-radius: 20px;
}

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 左上，右上，右下，左下。（顺时针）
三个值: 左上, 右上和左下，右下。（左上、对角、右下）
两个值: 左上与右下，右上与左下。（对角）
一个值： 四个圆角值相同。

画圆形的办法：圆角大小 >= 盒子半径

二、椭圆边角

#box1 {
    border-radius: 50px/15px;
}

#box2 {
    border-radius: 50%;
}

三、border-radius - 指定每个圆角

属性	描述
border-radius	所有四个边角
border-top-left-radius	左上
border-top-right-radius	右上
border-bottom-right-radius	右下
border-bottom-left-radius	左下