圆角边框是 CSS3 新增属性, 在圆角边框出现之前, 前端开发有的采用整块的圆角图片作为背景, 下面我们就来介绍一些 CSS 圆角的实现方法.
css3 实现圆角边框:
CSS 中可以使用 border-radius 属性设置圆角边框. border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性.
圆角边框 (border-radius) 的基本用法:
圆角边框的最基本用法就是设置四个相同弧度的圆角
- boder-top-left-radius:30px; // 左上角
- boder-top-right-radius:30px; // 右上角
- boder-bottom-left-radius:30px; // 右下角
- boder-bottom-right-radius:30px; // 左下角
如果这四个弧度的圆角相同, 可以写成:
border-radius:30px;
示例:
CSS 部分:
- .div1{
- margin:0 auto;
- background: darkcyan;
- width:200px;
- height:200px;
- border:2px solid darkslategray;
- border-radius:30px;
- text-align: center;
- line-height: 200px;
- }
html 部分:
<div class="div1">圆角边框</div>
效果如图:
来源: http://www.css88.com/qa/css3/16302.html