CSS3边框border-radius

最新推荐文章于 2024-04-18 15:07:49 发布

原创最新推荐文章于 2024-04-18 15:07:49 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #CSS

HTML/CSS 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了CSS3中border-radius属性的用法，包括如何设置不同数量的参数实现各种圆角效果，以及水平半径和垂直半径的具体设置方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、官方解释

设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数。

水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

如果只提供一个，将用于全部的于四个角。

如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。

如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

垂直半径也遵循以上4点。

对应的脚本特性为borderRadius。

二、例子

2.1 四个参数值

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px;"></div>

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 100px;"></div>

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px 100px;"></div>

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 10px 30px 50px 100px;"></div>

所以border-radius里面的参数应该代表的是四个角上圆的半径。

2.2 百分比

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 25%;"></div>

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50%;"></div>

2.3 水平半径/垂直半径

<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 100px/150px;"></div>

<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/300px;"></div>

<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/200px;"></div>

这里的半径全等于本身宽度(width/2)+半径宽度(border-width/2)即为一个椭圆。另外半径最多渲染宽度(width/2)+半径宽度(border-width/2)的值，超过的按比例值来算。

CSS3边框border-radius