小白教程
所有教程
关于
Search
172.70.100.75
172.70.100.75
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Css3 pr border radius”的源代码
本页内容
上一节:
Css3_pr_border_image_width
下一节:
Css3_pr_border_top_left_radius
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:border-radius}}[[Category:css reference|80]] = CSS3 border-radius 属性 = 小白教程(xiaobai.wang) 给两个 div 元素添加圆角的边框: <sample title="" desc="" lang="html" hererun="1"> #example1 { border: 2px solid red; border-radius: 25px; } #example2 { border: 2px solid red; border-radius: 50px 20px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #example1 { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } #example2 { border: 2px solid red; padding: 10px; border-radius: 50px 20px; } </style> </head> <body> <div id="example1"> <p>border-radius 属性允许您为元素添加圆角边框!</p> </div> <br><br> <div id="example2"> <p>如果设置了两个值,第一个用于左上角和右下角,第二个用于右上角和左下角。</p> </div> </body> </html> </run> == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | border-radius | 4.0 -webkit- | 9.0 | 4.0 -moz- | 5.0 -webkit- | 10.5 -o- |} == 属性定义及使用说明 == border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。 border-radius 属性是一个最多可指定四个 border-*-radius 属性的复合属性 '''提示:''' 这个属性允许你为元素添加圆角边框! {| class="table table-striped table-hover" | 默认值: | 0 |- | 继承: | no |- | 版本: | CSS3 |- | JavaScript 语法: | object object.style.borderRadius="5px" |} == 语法 == border-radius: 1-4 length|% / 1-4 length|%; '''注意:''' 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。 {| class="table table-striped table-hover" ! 值 ! 描述 |- | length | 定义弯道的形状。 |- | % | 使用%定义角落的形状。 |} <sample title="" desc="" lang="html" hererun="1"> border-radius: 1em/5em; /* 等价于: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; </sample> <sample title="" desc="" lang="html" hererun="1"> border-radius: 4px 3px 6px / 2px 4px; /* 等价于: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px; </sample> '''椭圆边框 -''' border-radius: 15px 50px 30px 5px:第一个值适用于左上角,第二个值适用于右上角,第三个值适用于右下角,第四个值适用于左下角: '''椭圆边框 -''' border-radius: 15px 50px 30px:第一个值适用于左上角,第二个值适用于右上角和左下角,第三个值适用于右下角: '''椭圆边框 -''' border-radius: 15px 50px:第一个值适用于左上角和右下角,第二个值适用于右上角和左下角 '''椭圆边框 -''' border-radius: 15px:该值适用于所有四个角,均等圆角 <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #rcorners4 { border-radius: 15px 50px 30px 5px; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; padding: 20px; width: 200px; height: 150px; } #rcorners7 { border-radius: 15px; padding: 20px; width: 200px; height: 150px; } .xiaobai-color { color: #fff !important; background-color: #73AD21 !important; background-color: #04AA6D !important; } </style> </head> <body> <p>椭圆边框 - border-radius: 15px 50px 30px 5px:第一个值适用于左上角,第二个值适用于右上角,第三个值适用于右下角,第四个值适用于左下角:</p> <p id="rcorners4" class="xiaobai-color"></p> <p>椭圆边框 - border-radius: 15px 50px 30px:第一个值适用于左上角,第二个值适用于右上角和左下角,第三个值适用于右下角:</p> <p id="rcorners5" class="xiaobai-color"></p> <p>椭圆边框 - border-radius: 15px 50px:第一个值适用于左上角和右下角,第二个值适用于右上角和左下角</p> <p id="rcorners6" class="xiaobai-color"></p> <p>椭圆边框 - border-radius: 15px:该值适用于所有四个角,均等圆角</p> <p id="rcorners7" class="xiaobai-color"></p> </body> </html> </run> == 更多实例 == 背景图带边框: <sample title="" desc="" lang="html" hererun="1"> #rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #rcorners { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p>背景图带边框:</p> <div id="rcorners">圆角边框!</div> </body> </html> </run> 不同类型参数: <sample title="" desc="" lang="html" hererun="1"> #rcorners7 { border-radius: 50px/15px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: #8AC007; padding: 20px; width: 200px; height: 150px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #rcorners7 { border-radius: 50px/15px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: #8AC007; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p>椭圆边框 - border-radius: 50px/15px:</p> <p id="rcorners7"></p> <p> 椭圆边框 - border-radius: 15px/50px:</p> <p id="rcorners8"></p> <p>椭圆边框 - border-radius: 50%:</p> <p id="rcorners9"></p> </body> </html> </run> 不同参数个数: <sample title="" desc="" lang="html" hererun="1"> #rcorners4 { border-radius: 15px 50px 30px 5px; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; padding: 20px; width: 200px; height: 150px; } #rcorners7 { border-radius: 15px; padding: 20px; width: 200px; height: 150px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #rcorners4 { border-radius: 15px 50px 30px 5px; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; padding: 20px; width: 200px; height: 150px; } #rcorners7 { border-radius: 15px; padding: 20px; width: 200px; height: 150px; } .xiaobai-color { color: #fff !important; background-color: #73AD21 !important; background-color: #04AA6D !important; } </style> </head> <body> <p>椭圆边框 - border-radius: 15px 50px 30px 5px:第一个值适用于左上角,第二个值适用于右上角,第三个值适用于右下角,第四个值适用于左下角:</p> <p id="rcorners4" class="xiaobai-color"></p> <p>椭圆边框 - border-radius: 15px 50px 30px:第一个值适用于左上角,第二个值适用于右上角和左下角,第三个值适用于右下角:</p> <p id="rcorners5" class="xiaobai-color"></p> <p>椭圆边框 - border-radius: 15px 50px:第一个值适用于左上角和右下角,第二个值适用于右上角和左下角</p> <p id="rcorners6" class="xiaobai-color"></p> <p>椭圆边框 - border-radius: 15px:该值适用于所有四个角,均等圆角</p> <p id="rcorners7" class="xiaobai-color"></p> </body> </html> </run> 简写格式: <sample title="" desc="" lang="html" hererun="1"> #example1 { border-radius: 2em / 5em; } /* 等价于: border-top-left-radius: 2em 5em; border-top-right-radius: 2em 5em; border-bottom-right-radius: 2em 5em; border-bottom-left-radius: 2em 5em; */ #example2 { border-radius: 2em 1em 4em / 0.5em 3em; } /* 等价于: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; */ </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #example1 { border: 2px solid red; padding: 10px; border-radius: 2em / 5em; } #example2 { border: 2px solid red; padding: 10px; border-radius: 2em 1em 4em / 0.5em 3em; } </style> </head> <body> <h2>border-radius: 2em / 5em:</h2> <div id="example1"> <p>等价于: border-top-left-radius: 2em 5em; border-top-right-radius: 2em 5em; border-bottom-right-radius: 2em 5em; border-bottom-left-radius: 2em 5em;</p> </div> <h2>border-radius: 2em 1em 4em / 0.5em 3em:</h2> <div id="example2"> <p>等价于: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;</p> </div> </body> </html> </run> == 相关文章 == CSS3 教程: [[css3 borders|CSS3 边框]]
返回至“
Css3 pr border radius
”。
上一节:
Css3_pr_border_image_width
下一节:
Css3_pr_border_top_left_radius