CSS圆角

介绍两种兼容性比较好的css圆角背景,之前也写过关于CSS制作三角形

第一种,使用背景+边框实现圆角

<!DOCTYPE html>
<html lang="zh_CN">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{margin-top: 30px; background: #fff;}
.box{ overflow: hidden;width:300px; margin:  0 auto; }
.b1{background: #ddd; height: 1px; font-size: 0; overflow: hidden; margin:0 2px;}
.b2{border-left: 1px solid #ddd; border-right:1px solid #ddd; height: 1px; overflow: hidden;  margin:0 1px; background: yellow;}
.content{border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0 10px; background: yellow;}

</style>
<head>
	</head>
	<body>
		<div class="box">
			<div class="b1"></div>
			<div class="b2"></div>
			<div class="content">
				<h2>圆角标题</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est odit, autem? Asperiores nulla ab, natus quidem quia ducimus libero ut quam, porro veritatis pariatur minima architecto esse dolores possimus deserunt.</p>
			</div>
			<div class="b2"></div>
			<div class="b1"></div>
		</div>
	</body>
	</html>

演示

第二种,使用负值margin+边框实现圆角

<!DOCTYPE html>  
<html>
<head>  
<meta charset="utf-8">  
<title>自适应圆角</title>  
<style>  
body{margin:100px;}  
div, p{margin:0;padding:0;}  
.div1, .div2, .div3{display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:black;}
.div1{border-width:1px;}
.div2, .div3{#left:-2px;border-width:0 1px;background-color:yellow;}
.div2{margin:0 -2px;}
.div3{margin:1px -2px;padding:0 6px;line-height:1.5;}
.arrow1, .arrow2{position:absolute;top:7px;width:0;height:0;overflow:hidden;border-top:6px transparent dotted;border-bottom:6px transparent dotted;}
.arrow1{left:-9px;border-right:6px black solid;}
.arrow2{left:-8px;border-right:6px yellow solid;}
</style>  
</head>
<body>
<div class="div1">  
    <div class="div2">
        <div class="div3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit odio dolores non dolorem autem numquam maiores porro nemo natus temporibus corporis magnam ab est, nobis aliquam, quae, officiis earum ad?</p>
        </div>
    </div>
    <div class="arrow1"></div>
    <div class="arrow2"></div>
</div>
</body>
</html>

演示

说明:

1.由于IE6和IE7不支持inline-block,所以用另一种display:inline; zoom:1;

2.由于IE6和ie7不支持margin负值,用了position:relative定位,加了一个left负值。

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原文链接:CSS圆角 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/css-border.html)

发表评论

请登录后发表评论:

“CSS圆角”有1个评论

  1. QQ糖爱的韦大宝

    第二个并没有实现。不知道是哪里出错了

    登录回复