如何在CSS

Question

当我将border-radius属性应用于彩色div时，我的网站现在看起来像这样：

但我希望它看起来像这样：

我知道通过调整border-radius是不够的，任何想法我怎么能实现上述？

PS：在我的情况下使用图像背景是不可行的

Answer 1

圆顶需要左右边距为负，边界半径应该加以改进。这应该够了吧。将其包装在overflow: hidden容器中会阻止水平滚动条。

＆＃13;

＆＃13;

.dome {
  margin: 10% -25% 0; 
  border-top-left-radius: 100%;
  border-top-right-radius: 100%; 
  padding-bottom: 50%;
}
.gradientbg {
  /* gradient generated with http://www.colorzilla.com/gradient-editor/ using #81badd and #ae85ff*/
  background: rgb(129,186,221);
  background: -moz-linear-gradient(top, rgba(129,186,221,1) 0%, rgba(174,133,255,1) 100%);
  background: -webkit-linear-gradient(top, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%);
  background: linear-gradient(to bottom, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81badd', endColorstr='#ae85ff',GradientType=0 );
}
.container {
  overflow: hidden;
}

＆＃13;

<div class="container">
  <div class="dome gradientbg"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

实现此效果所需的唯一方法是左上角和右上角的％半径，您可以使用border-top-left-radius:100%和border-top-right-radius:100%的单独声明来实现这一点，或者使用border-radius:100% 100% 0 0的组合声明，其中第一个'100％'表示左上角，第二个'100％'表示右上角，然后0表示右下角，最后左下角。 / p>

div {
  margin: 10% 0 0;
  padding-bottom: 100px;
  border-radius: 100% 100% 0 0;
  // gradient generated with http://www.colorzilla.com/gradient-editor/ using #81badd and #ae85ff
  background: rgb(129,186,221);
  background: -moz-linear-gradient(top, rgba(129,186,221,1) 0%, rgba(174,133,255,1) 100%);
  background: -webkit-linear-gradient(top, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%);
  background: linear-gradient(to bottom, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81badd', endColorstr='#ae85ff',GradientType=0 );
}

<div></div>

Answer 3

这样的一些代码可能会解决您的问题：

<div style="width: 300px;height: 300px;overflow: hidden;border: 1px solid #d5d5d5;">
  <div style="background: #99A6E7; width: 700px; height: 700px; border-radius: 50%;position: relative;margin-left: -200px;margin-top: 150px;">
  </div>
</div>