网页css圆角样式是怎么做的？

答案:4 悬赏:0 手机版

解决时间 2021-05-17 17:49

提问者网友：了了无期
2021-05-17 12:56

看到很多网站使用圆角。而且不是图片做的请问怎么做。

类似www.anmosex.com 这个网站上面的圆角

最佳答案

五星知识达人网友：duile
2021-05-17 13:11

用div 模拟达到圆角效果直接贴代码（自己整理的）

html：
<body>
<div id="wrap1">
<div id="top_wrap1">
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
<div id="t4"></div>
<div id="t5"></div>
<div id="t6"></div>
<div id="t7"></div>
<div id="t8"></div>
</div>
<div id="content_wrap1">

<br/>
</div>
<div id="bottom_wrap1">
<div id="t8"></div>
<div id="t7"></div>
<div id="t6"></div>
<div id="t5"></div>
<div id="t4"></div>
<div id="t3"></div>
<div id="t2"></div>
<div id="t1"></div>
</div>
</div>

css：
#wrap1{
width:400px;
background:none;}
#top_wrap1,#bottom_wrap1{
overflow:hidden;
height:8px;
text-align:center;
}
#content_wrap1{
background:#66ccfe;}
#t1,#t2,#t3,#t4,#t5,#t6,#t7,#t8{
height:1px;
overflow:hidden;
margin:0 auto;
background:#66ccfe;}
#t1{width:390px;}
#t2{width:394px;}
#t3{width:396px;}
#t4{width:398px;}
#t5{width:398px;}
#t6{width:400px;}
#t7{width:400px;}
#t8{width:400px;}

得到效果：

全部回答

1楼网友：独钓一江月
2021-05-17 15:55

给你一段代码，自己看一下吧！！！！

<html> <head> <meta http-equiv="Content-Type"

content="text/html;charset=utf-8"> <style> div.bg{background:#ffc20e;width:50%} b{display:block;} div b.topb b,div b.bottomb b

{height:1px;overflow:hidden;background:#ffc20e;} div b.topb,div b.bottomb{background:white} b.t1{margin:0 5px} b.t2{margin:0 3px} b.t3{margin:0 2px} b.t4{margin:0 1px;height:2px;} </style> </head> <body> <div align="center"> <div class="bg"> <b class="topb"><!–**此b标签所包含的b标签要进行溢出隐藏**–> <b class="t1"></b> <b class="t2"></b> <b class="t3"></b> <b

class="t4"></b> </b> <br> 年度总结：涉世未深，好吃懒做，眼高手低，胆小心粗，<br>爱

慕虚荣，贪图富贵，眷恋美色，才疏学浅。 <br> <br> <b class="bottomb"> <b class="t4"></b> <b class="t3"></b> <b class="t2"></b> <b

class="t1"></b> </b> </div> </div> </body> </html>

2楼网友：刀戟声无边
2021-05-17 14:35

参考以下代码即可（可直接运行）：

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;} #xsnazzy h1 {font-size:2.5em; color:#fff;} #xsnazzy h2 {font-size:2em;color:#06a; border:0;} #xsnazzy p {padding-bottom:0.5em;} #xsnazzy h2 {padding-top:0.5em;} #xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;} .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;} .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;} .xb1 {margin:0 5px; background:#08c;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}

</style>

<div id="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent"> <p>aaaaaaaa </p> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div>

3楼网友：夜余生
2021-05-17 14:22

下面这个网站讨论了7种CSS圆角框解决方案,你可以参考看看

http://www.qcdn.net/blog/post/77.html

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息