【问题标题】:CSS: Rounded effect [duplicate]CSS:圆角效果[重复]
【发布时间】:2020-07-25 02:37:57
【问题描述】:

我想用 CSS 使这个效果四舍五入。

但是,我只能做这个效果:

这是代码:

如何实现这种效果并做出响应?

【问题讨论】:

  • ?

标签: css


【解决方案1】:

只需将px 更改为%border-radius: 0px 0px 50% 500%;

body {
  height: 100vh;
  width: 100%;
}

#oval {
  position: relative;
  width: 100%;
  height: 100px;
  background: #ffffff;
  border-radius: 0px 0px 50% 500%;
}
<div style="width: 100%; height: 100px; background-color: #30393b">
  <div id="oval" />
</div>
<div style="width: 100%; height: 100px; background-color: #30393b" />

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-24
    • 2010-10-23
    • 2015-07-14
    • 2014-05-22
    • 1970-01-01
    相关资源
    最近更新 更多