语法
border-bottom-right-radius: length | % | initial | inherit;
border-bottom-right-radius 属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { height: 40px; background: #1c87c9; border: 4px solid #000000; border-bottom-right-radius: 35px; } </style> </head> <body> <h2>Border-bottom-right-radius 示例</h2> <div></div> </body> </html>
具有两个值的 border-bottom-right-radius 属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { height: 40px; background: #eee; border: 4px solid #666; border-bottom-right-radius: 30px 15px; } </style> </head> <body> <h2>Border-bottom-right-radius 示例</h2> <div></div> </body> </html>
具有“百分比”值的 border-bottom-right-radius 属性示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { height: 40px; background: #8ebf42; border: 4px solid #000000; border-bottom-right-radius: 30% 50%; } </style> </head> <body> <h2>Border-bottom-right-radius 示例</h2> <div></div> </body> </html>
CSS border-bottom-right-radius 属性值说明
值 | 说明 |
---|---|
length | 通过“px”指定右下角的形状。 |
% | 以百分比指定右下角的形状。 |
initial | 将属性设置为其默认值。 |
inherit | 从父元素继承属性。 |
border-bottom-right-radius CSS 属性用于设置元素右下角的圆角。
border-bottom-right-radius 属性是 CSS3 属性之一。
border-bottom-right-radius 属性指定了定义边框右下角圆角的水平和垂直半径。
此属性由两个值指定:长度和百分比。
当只给出一个值时,它指定椭圆的水平和垂直半径。
如果给出两个值,第一个设置水平半径,第二个设置垂直半径。
如果未定义任何值,则边框为方形。
如果使用背景图像或者颜色,它将在边框处被剪裁。
剪辑的过程由 background-clip 属性的值定义。
如果 CSS border-bottom-right-radius 属性的值未设置为应用于 border-bottom-right-radius 属性之后的元素的 border-radius 速记属性,则速记属性将重置那个值到它的初始值。
初始值 | 0 |
---|---|
应用于 | 所有元素。它也适用于::first-letter。 |
继承 | 无效 |
可动画的 | 右下边框的半径可以设置动画。 |
版本 | CSS3 |
DOM 语法 | object.style.borderBottomRightRadius=“15px”; |
日期:2020-06-02 22:14:17 来源:oir作者:oir