实现div圆角和圆形

发布时间:2016年2月3日 作者:未知 查看次数:1386

完整代码:(需新浏览器CSS3)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title>div圆角</title> 

<meta charset="gb2312" /> 

<style type="text/css"> 


.mMain{

width:350px;

height:350px;

background-color:#AA0A0A;

border-radius:10px;

}



</style> 


</head> 

<body> 


<div class="mMain">

</div>


</body> 

</html>


-----------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>div圆形</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="Content-Language" content="zh-CN" />

<style>

.cpanel div.icon span{-moz-transition-duration: 0.8s;background-color: #FFFFFF;background-position: -30px 50%;border: 1px solid #CCCCCC;border-radius: 60px;color: #565656;display: block;float: left;height: 100px;width: 100px;text-align:center;text-indent:0;}

.cpanel div.icon span:hover{border:1px solid blue;}


.cRoundImg{border-radius:50px;overflow:hidden;}


</style>

</head>

<body>

<div class="cpanel">

    <div class="icon">

        <span>abcddddddd</span>

    </div>

</div>


<div class="cRoundImg" style="position:absolute;left:200px;top:200px;width:100px;height:100px;background-color:#aa2222;">aaaaaaaaaaaaaaaa

</div>

</body>

</html>



版权所有!www.sieye.cn
E.Mail:sieye@sohu.com QQ:66697110