實現(xiàn)CSS3中的border-radius(邊框圓角)示例代碼
發(fā)布時間:2013-07-19 17:27:37 作者:佚名
我要評論

本文為大家詳細介紹下如何實現(xiàn)CSS3中的border-radius(圓角),具體代碼如下,感興趣的朋友可以參考下哈,希望對大家有所幫助
實現(xiàn)邊框圓角
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background-color: #fff;
font: normal 11pt Trebuchet MS,Arial,sans-serif;
}
.box1 {
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 50px auto;
padding: 20px;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 10px;
}
.box2 {
background: transparent url(ashera.jpg); no-repeat top left;
width: 420px;
height: 220px;
margin: 0 auto 35px auto;
padding: 30px;
color: #fff;
font-weight: bold;
border: 11px solid #35b70e;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);
}
.box3 {
background-color: #ddd;
width: 210px;
height: 30px;
padding: 20px;
position: absolute;
top: 5px; left: 5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior: url(border-radius.htc);
}
.rel {
margin: 50px 0 0 33px;
padding: 25px;
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */
}
</style>
</head>
<body>
<p>Not just divs, but any element*</p>
<div class="rel">
<div class="box1">
11 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
</div>
<div class="box2">
22 this cat is a hybrid of domestic and wild breeds :)
</div>
<div class="box3">
33 this box is absolutely positioned
</div>
</div>
</body>
</html>
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);
復制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background-color: #fff;
font: normal 11pt Trebuchet MS,Arial,sans-serif;
}
.box1 {
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 50px auto;
padding: 20px;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 10px;
}
.box2 {
background: transparent url(ashera.jpg); no-repeat top left;
width: 420px;
height: 220px;
margin: 0 auto 35px auto;
padding: 30px;
color: #fff;
font-weight: bold;
border: 11px solid #35b70e;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);
}
.box3 {
background-color: #ddd;
width: 210px;
height: 30px;
padding: 20px;
position: absolute;
top: 5px; left: 5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior: url(border-radius.htc);
}
.rel {
margin: 50px 0 0 33px;
padding: 25px;
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */
}
</style>
</head>
<body>
<p>Not just divs, but any element*</p>
<div class="rel">
<div class="box1">
11 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
</div>
<div class="box2">
22 this cat is a hybrid of domestic and wild breeds :)
</div>
<div class="box3">
33 this box is absolutely positioned
</div>
</div>
</body>
</html>
相關文章
CSS3 border-radius(圓角)效果在線調試工具
這是一款可在線調試并預覽CSS3 border-radius(圓角)效果的工具。右側具有實時調試并顯示預覽效果的功能,同時能夠實時生成對應的css3效果代碼,方便需要的朋友使用。2016-05-31- 這篇文章主要介紹了CSS3中border-radius屬性設定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設置弧度來制作其他弧線邊框圖形,需要的朋友2016-05-10
- 這篇文章主要介紹了CSS3使用border-radius屬性制作圓角,并附上示例代碼,推薦給有相同需求的小伙伴。2014-12-22
IE系列不支持CSS的圓角border-radius等屬性的解決方案
IE系列瀏覽器不支持CSS的圓角(border-radius)等CSS3屬性,如何解決這個問題呢?百度了一下,發(fā)現(xiàn)有個開源的插件可以解決此問題2014-09-15- 前面系統(tǒng)總結了CSS3中Gradient和RGBA的用法,今天我們在一起來看看CSS3中制作圓角的屬性border-radius的具體用法;在CSS2中,大家都碰到過圓角的制作,如今CSS3中的border-ra2012-12-24
CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)
border-radius:用這個屬性能實現(xiàn)圓角邊框的效果?,F(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。2012-03-28CSS3 border-radius圓角的實現(xiàn)方法及用法詳解
這篇文章主要介紹了CSS3 border-radius圓角的實現(xiàn)方法及用法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-14