首页 » DIV+CSS » 正文

小悟:css实现圆角矩形

       浏览网页的时候你经常会发现这样的图片吗?你想过用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也能实现援交效果,您还不赶快尝试一下么?

发表评论