实现边框圆角
-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>
分享到:
相关推荐
让IE实现CSS3中的border-radius(圆角)
引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。 CSS ...
css3教程应用css3 圆角border-radius属性制作...
让IE6也识别CSS3-圆角效果应用border-radius
实现边框圆角 -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//...
前面系统总结了CSS3中Gradient和RGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都碰到过圆角的制作。当时,对于圆角的制作,我们都需要使用多张圆角图片做为背景,...
-webkit-border-radius:苹果;...border-radius:用这个属性能实现圆角边框的效果。 现在只有Mozilla/Firefox 和 Safari 3支持该属性。请看下面的示例代码: 复制代码代码如下: <div style=”bac
主要介绍了CSS3使用border-radius属性制作圆角,并附上示例代码,推荐给有相同需求的小伙伴。
border-radius失效
以前想实现一个圆角是比较麻烦的,不过现在CSS3来了,实现圆角变的那么的简单只需要一句话:border-radius即可。下面青岛星网跟大家分享下:border-radius的具体用法。
有什么用?... border-radius: 50%; } 上述50%就是说设置各边圆角都为50%。 那么如何画个半圆? 如下,把宽度设置为高度的两倍。 #demo2 { width:100px; height:50px; background:green; bo
NULL 博文链接:https://jm1999.iteye.com/blog/2218022
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题,而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好,如何解决这个问题呢? 一种比较传统的方案是放弃CSS3,使用背景图,但是这种...
可以实现IE9以下版本CSS圆角效果与图片显示投影等功能。