google了下个简单的纯CSS圆角方框，特来分享

Vaeevil · 发表于 2014-5-30 11:03

本帖最后由 Vaeevil 于 2014-5-30 14:27 编辑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>css圆角方框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="css圆角方框 http://www.google.com" />
<style>

.divbox{ width:200px;}/*只设置宽，用子div来设置高度*/
.div1{ background:#999999; border-left:#999999 solid 1px; border-right:solid 1px #999; margin:0px 2px; height:1px; overflow:hidden;}/*继承父div的继承父DIV的宽*/
.div2{background:#FFF; border-left:#999999 solid 1px; border-right:solid 1px #999; margin:0px 1px; height:1px; overflow:hidden;}/*继承父div的宽*/
.divmiddle{ height:200px;border-left:#999999 solid 1px; border-right:solid 1px #999;}/*不要问这里有多宽，这是继承父div的宽，用这个高去延伸父DIV的高*/
</style>

</head>
<body>
   <div class="divbox">
   <div class="div1"></div>
   <div class="div2"></div>
   <div class="divmiddle">内容 circle</div>
   <div class="div2"></div>
   <div class="div1"></div>
   </div>

</body>
</html>

---------------------
附上效果图，偶就闪了，这个特简单，分享下，纯css

star0angel · 发表于 2014-5-30 11:20

lz图好像挂了看不到效果啊

lhbsxy110 · 发表于 2014-5-30 11:22

很唯美的图。真不错。

拉手看星星 · 发表于 2014-5-30 11:28

这真的是css？

usb小霸王 · 发表于 2014-5-30 11:32

外链不行呀！！1

吾爱浩浩 · 发表于 2014-5-30 11:45

lz图好像挂了看不到效果啊

十七年的春天 · 发表于 2014-5-30 12:09

楼主图没了

manbajie · 发表于 2014-5-30 12:28

看看什么效果

takesportm · 发表于 2014-5-30 13:16

看不到图呢
不过，用border-radiue不就行了吗？？

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] google了下个简单的纯CSS圆角方框，特来分享