搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
CSS 教程
CSS 基础教程
源代码
清空
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3 border-radius 属性示例- 基础教程(div.cn)</title> <style> div { padding: 15px; margin-bottom: 20px; background: #ffb6c1; border: 2px solid #f08080; } div.one { border-radius: 20px; } div.two { border-radius: 10px 30px; } div.three { border-radius: 10px 30px 20px; } div.four { border-radius: 10px 20px 30px 40px; } </style> </head> <body> <div class="one"> <strong>单值语法</strong>：单个值定义所有角的半径。</div> <div class="two"> <strong>二值语法</strong>：第一个值定义左上角和右下角的半径，第二个值定义右上角和右下角的半径 左侧的角。</div> <div class="three"> <strong>三值语法</strong>：第一个值定义左上角的半径，第二个值定义右上角和左下角的半径， 第三个值定义右下角的半径。</div> <div class="four"> <strong>四值语法：</strong>：每个值分别按左上角，右上角，右下角和左下角的顺序定义边框的半径。 </div> <p> <strong>警告</strong>：Internet Explorer 8和更早版本不支持<code> border-radius </code>属性。</p> </body> </html>
运行结果
