PHP技术博客浏览网页的时候你经常会发现这样的图片吗？你想过用css可以实现这种效果吗？小涛来告诉您，能的！
<html>
<head>
<title>飞自由技术—测试css 圆角矩形</title>
<style type=”text/css”>
b{
display:block;
height:1px;
overflow:hidden;
background:#f6f6f6
}
.top1{
width:294px;
background:#ccc;
margin:0 4px;
}
.top2{
width:294px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin:0 3px;
}
.top3{
width:296px;
border:1px solid #ccc;
border-bottom:none;
border-top:none;
margin:0 2px;
}
.top4{
width:298px;
border:1px solid #ccc;
border-top:none;
border-bottom:none;
margin:0 1px;
height:2px;
}
.text_box{
position:relative;
width:300px;
height:100px;
border:1px solid #ccc;
border-top:none;
border-bottom:none;
background:#f6f6f6
}
.sa-bg{
display:block;
overflow:hidden;
width:16px;
height:16px;
position:absolute;
top:50px;
left:-6px;
color:#ddd
}
.sa{
display:block;
overflow:hidden;
width:16px;
height:16px;
position:absolute;
top:50px;
left:-5px;
color:#f6f6f6
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”Content-Language” content=”zh-cn” />
</head>
<body>
<b class=”top1″></b>
<b class=”top2″></b>
<b class=”top3″></b>
<b class=”top4″></b>
<div class=”text_box”>
<span class=”sa-bg”>◆</span><span class=”sa”>◆</span>
飞自由技术博客感谢您的支持！ 立即访问
</div>
<b class=”top4″></b>
<b class=”top3″></b>
<b class=”top2″></b>
<b class=”top1″></b>
</body>
</html>
原来以为只有图片才能实现这个效果，经过测试这个之后，偶，太可怕了，css也能实现援交效果，您还不赶快尝试一下么？