欢迎来到Java学习网!
设为首页 | 加入收藏
当前位置: 首页 > Java语言 > CSS教程 >
原来以为只有图片才能实现这个效果,经过测试这个之后,CSS也能实现圆角效果,您还不赶快尝试一下么?


<html>
<head>

<title>CSS圆角矩形效果实现 - Java教程:http://www.javaweb.cc</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>

    相关教程
    推荐内容