欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > CSS >内容正文

CSS

CSS中的border-radius属性

发布时间：2023/12/1 CSS 64 豆豆
生活随笔 收集整理的这篇文章主要介绍了 CSS中的border-radius属性 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

CSS | 边界半径属性 (CSS | border-radius Property)

The border-radius property is commonly used to convert box elements into circles. We can convert box elements into the circle element by setting the border-radius to half of the length of a square element.

border-radius属性通常用于将框元素转换为圆形。 通过将边框半径设置为正方形元素长度的一半，我们可以将框元素转换为圆形元素。

Syntax:

句法：

Element {Width: 150px;Height: 150px;border-radius: 50%; }

Example:

例：

<!DOCTYPE html> <html><head><style>p {background: #73AD21;width: 200px;height: 150px;border-radius: 50%}</style> </head><body><h1>CSS Rounded Corners</h1><p></p> </body></html>

Output

输出量

In the above example, 50% border-radius is applied to all the corners.

在上面的示例中，将50％的边界半径应用于所有角。

1)具有一个值的border-radius属性 (1) border-radius property with one value)

The property takes a single value to the border-radius and that value is applied to all the four corners and the corners are rounded equally.

该属性对边界半径采用单个值，并且该值应用于所有四个角，并且这些角均等地舍入。

Syntax:

句法：

Element {border-radius: 15px; }

Example:

例：

<!DOCTYPE html><html><head><style>div {border: 2px solid red;padding: 10px;border-radius: 25px;}</style> </head><body><div><p>Border Radius in CSS</p></div> </body></html>

Output

输出量

In the above example, the border-radius of 25px is applied to all four sides equally.

在上面的示例中， 边界半径 25px均等地应用于所有四个侧面。

2)具有两个值的border-radius属性 (2) border-radius property with two values)

This property takes two values to the border-radius. The first value is applied to top-left and bottom-right corners, the second value is applied to top-right and bottom-left corners.

此属性将border-radius取两个值。 第一个值应用于左上角和右下角 ，第二个值应用于右上角和左下角 。

Syntax:

句法：

Element {border-radius: 15px 10px; }

Example:

例：

<!DOCTYPE html><html><head><style>div {border: 2px solid red;padding: 10px;border-radius: 60px 30px;}</style> </head><body><div><p>Border Radius in CSS</p></div> </body></html>

Output

输出量

In the above example, the border-radius of 60px is applied to top-left and bottom-right and 30px is applied to top-right and bottom-left corners.

在上面的示例中， 边框半径 60px应用于左上角和右下角，而30px应用于右上角和左下角 。

3)具有三个值的border-radius属性 (3) border-radius property with three values)

This property takes three values to the border-radius. The first value is applied to the top-left corner and the second value is applied to top-right and bottom-left corners, and the third value is applied to the bottom-right corner.

该属性将border-radius取三个值。 所述第一值被施加到左上角和所述第二值被施加到右上和左下的角，并且所述第三值被施加到右下角 。

Syntax:

句法：

Element {border-radius: 15px 10px 30px; }

Example:

例：

<!DOCTYPE html><html><head><style>div {border: 2px solid green;padding: 10px;border-radius: 60px 30px 20px;}</style> </head><body><div><p>Border Radius in CSS</p></div> </body></html>

Output

输出量

In the above example, border-radius of 60px is applied to top-left corner, 30px is applied to top-right and bottom-left corners and 20px is applied to bottom-right corner.

在上面的例子中，60像素 边界半径被施加到左上角 ，30像素被施加到右上和左下的角和20像素被施加到右下角 。

4)具有四个值的border-radius属性 (4) border-radius property with four values)

This property takes four values to the border-radius and applies four different values to each of the corners. The first value is applied to the top-left corner, the second value is applied to the top-right corner, the third value is applied to the bottom-right corner and the fourth value is applied to the bottom-left corner.

此属性将四个值应用于边界半径 ，并将四个不同的值应用于每个角。 所述第一值被施加到左上角 ，第二值被施加到右上角 ，第三值被施加到右下角和第四值被施加到左下角 。

Syntax:

句法：

Element {border-radius: 15px 10px 20px 5px; }

Example:

例：

<!DOCTYPE html><html><head><style>div {border: 2px solid green;padding: 10px;border-radius: 60px 30px 50px 10px;}</style> </head><body><div><p>Border Radius in CSS</p></div> </body></html>

Output

输出量

In the above example, 60px is applied to top-left corner, 30px is applied to the top-right corner, 50px is applied to bottom-right corner and 10px is applied to bottom-left corner of the box.

在上述例子中，60像素被施加到左上角 ，30像素被施加到右上角 ，50像素被施加到右下角和10px的被施加到盒的左下角 。

翻译自: https://www.includehelp.com/code-snippets/the-border-radius-property-in-css.aspx

总结

以上是生活随笔为你收集整理的CSS中的border-radius属性的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。