当前位置：首页 → 问答吧 → 简单css圆角矩形

简单css圆角矩形

时间：2011-01-22

来源：互联网

转发一个圆角边框的，高手漂过。有点像腾讯微博的对话效果，网上很多评论也是这么做好的，我觉得这个突出的小三角用得很聪明。

复制内容到剪贴板

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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:-8px;color:#ddd}
.sa{display:block;overflow:hidden;width:16px;height:16px;position:absolute;top:50px;left:-6px;color:#f6f6f6}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body>





<div class="text_box">
◆◆
there is your content
</div>




</body>
</html>

作者: tydgb 发布时间: 2011-01-22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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:-8px;color:#ddd} .sa{display:block;overflow:hidden;width:16px;height:16px;position:absolute;top:50px;left:-6px;color:#f6f6f6} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head> <body> <div class="text_box"> ◆◆ there is your content </div> </body> </html>
提示：您可以先修改部分代码再运行

看看。
右下角好像很不自然。

作者: yamanyin 发布时间: 2011-01-22

简单css圆角矩形

代码:

热门阅读

热门下载