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屬性通常用于將框元素轉(zhuǎn)換為圓形。 通過將邊框半徑設(shè)置為正方形元素長(zhǎng)度的一半，我們可以將框元素轉(zhuǎn)換為圓形元素。
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％的邊界半徑應(yīng)用于所有角。
1)具有一個(gè)值的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.
該屬性對(duì)邊界半徑采用單個(gè)值，并且該值應(yīng)用于所有四個(gè)角，并且這些角均等地舍入。
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均等地應(yīng)用于所有四個(gè)側(cè)面。
2)具有兩個(gè)值的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取兩個(gè)值。 第一個(gè)值應(yīng)用于左上角和右下角 ，第二個(gè)值應(yīng)用于右上角和左下角 。
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應(yīng)用于左上角和右下角，而30px應(yīng)用于右上角和左下角 。
3)具有三個(gè)值的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取三個(gè)值。 所述第一值被施加到左上角和所述第二值被施加到右上和左下的角，并且所述第三值被施加到右下角 。
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)具有四個(gè)值的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.
此屬性將四個(gè)值應(yīng)用于邊界半徑 ，并將四個(gè)不同的值應(yīng)用于每個(gè)角。 所述第一值被施加到左上角 ，第二值被施加到右上角 ，第三值被施加到右下角和第四值被施加到左下角 。
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
總結(jié)
以上是生活随笔為你收集整理的CSS中的border-radius属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 颐和园淡旺季时间
- 下一篇： css模糊_如何使用CSS模糊图像？