首页 > 代码库 > css3 圆角

css3 圆角

代码块

html页面:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>css3 圆角</title>

</head>

<body>

<div class="div-common radiusAttr">CSS3 圆角属性</div>

<div class="div-common twoRadius">两个值</div>

<div class="div-common threeRadius">三个值</div>

<div class="div-common fourRadius">四个值</div>

<div class="div-common bgimgradius">指定背景图片的元素圆角</div>

<div class="div-common borderradius">指定边框的元素圆角</div>

<div class="div-common bgradius">指定背景颜色的元素圆角!</div>

<div class="borderRadius">border-radius 属性允许您为元素添加圆角边框!</div>

</body>

</html>


css样式:

<style type="text/css" media="screen">

div{

margin:50px;

}

.borderRadius{

border:2px solid #a1a1a1;

padding:10px 40px;

background-color: #ddd;

width: 300px;

border-radius:25px;

}


.div-common{

width: 200px;

height: 150px;

padding: 20px;

}


.bgradius{

background-color: #8AC007;

border-radius: 25px;

}


.borderradius{

border:1px solid #8AC007;

border-radius: 25px;

}


.bgimgradius{

border-radius: 25px;

background:url(pulpitrock.jpg) repeat left top;

}


.fourRadius{

background-color: #8AC007;

border-radius: 15px 50px 30px 5px;

}


.threeRadius{

background-color: #8AC007;

border-radius: 15px 50px 30px;

}


.twoRadius{

background-color: #8AC007;

border-radius: 15px 50px;

}


.radiusAttr{

background-color: #8AC007;

/*border-radius: 20px;*/

border-top-left-radius: 20px;

border-top-right-radius: 20px;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

}

</style>


本文出自 “素颜” 博客,请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1883409

css3 圆角