html – 在div的中心添加半径而不是角

概述我非常了解html和css,我正在寻找类似于css而不是图像的东西吗？ 是否有任何技巧可以用Css做到这一点？ HTML <div id="zone-user-wrapper" class="zone-wrapper"></div> CSS .zone-wrapper{ background: none repeat scroll 0 0 #01b888; height:150px 我非常了解@R_403_6832@和CSS,我正在寻找类似于CSS而不是图像的东西吗？

是否有任何技巧可以用CSS做到这一点？
HTML

<div ID="zone-user-wrapper" ></div>

CSS

.zone-wrapper{    background: none repeat scroll 0 0 #01b888;    height:150px;}

我做了一个fiddle

谢谢

解决方法 你可以尝试这样的事情：

Fiddle

@R_403_6832@：

<div ></div><div ID="shape"></div>

CSS：

.zone-wrapper{    background: none repeat scroll 0 0 #01b888;    height:150px;}#shape {    height: 20px;    background-color: white;    border-top-left-radius: 5000px 300px;    border-top-right-radius: 5000px 300px;    top: -20px;    position: relative;}

< ———————————————— ————编辑————————————- ————————>

根据您的要求复制website上的那个.

在这里,我添加了border-top-left-radius：4000px 150px和border-top-right-radius：4000px 150px;到.content和.seperator.然后,为所有元素提供适当的z-index. .content具有最高的z-index值,.zone-wrapper具有最低的z-index值,而.seperator位于中间.

< -------------------- [Fiddle | Full Screen Demo | With the Image With the Image] ——————–>

@R_403_6832@：

<div ></div><div ></div><div ></div>

CSS：

body {    margin: 0 0;}.zone-wrapper{    background: url(http://s25.postimg.org/4lur4kk23/pattern.png) repeat scroll 0 0 #01b888;    height:180px;    z-index: 0;}.seperator {    height: 50px;    background-color: #00533D;    border-top-left-radius: 4000px 150px;    border-top-right-radius: 4000px 150px;    top: -47px;    wIDth: 100%;    position: relative;    z-index: 1;}.content {    top: -90px;    position: relative;    height: 800px;    background-color: #93fbdf;    border-top-left-radius: 4000px 150px;    border-top-right-radius: 4000px 150px;    z-index: 2;}

总结

以上是内存溢出为你收集整理的html – 在div的中心添加半径而不是角全部内容，希望文章能够帮你解决html – 在div的中心添加半径而不是角所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。