CSS3案例:为段落添加圆角边框

来自CloudWiki
跳转至: 导航搜索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>border-radius</title> 
<style>
div{margin:20px; border: 10px solid red;}
.para
{
width:300px; 
line-height:50px;
padding:5px;
height: 50px;
border-top-left-radius:150px 25px;
/*单个圆角值不会出现'/',用空格分隔,值分别为水平半径和垂直半径*/
border-bottom-right-radius:50% 50%;
/*单个圆角值不会出现'/',用空格分隔,百分比分别指占外边框的宽和高的比例*/
}
.para2
{
width:300px; 
line-height:50px;
padding:5px;
height: 50px;
border-radius:100px/50px;
/*多个圆角值设置可以用'/',前后两个值粉笔表示所有圆角的水平半径和垂直半径*/
}
</style>
</head>
<body>
    <div class="para">关于配送延迟的通知,请相互转告</div>
    <div class="para2">关于配送延迟的通知,请相互转告</div>
</body>
</html>