CSS - 圆角背景

Question

在 CSS 中是否有这个可能？

如果可以，怎么做呢？我尝试了使用 border-top-left-radius，但效果不一样。

- Patryk Lesiecki

Answer 1

您可以通过设置border-*-*-radius的长度和百分比来实现相似的效果。

div {
  width: 100%;
  height: 200px;
  background-color: red;
  border-top-left-radius: 50% 20px;
  border-top-right-radius: 50% 20px;
}

这是一个快速演示：https://jsfiddle.net/crswll/wqsebkpz/1/ 并且有一张图片作为它工作的证明：https://jsfiddle.net/crswll/wqsebkpz/2/ 你可以在这里找到更多细节：https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Formal_syntax

- Bill Criswell

Answer 2

我认为 border-radius: 10px 10px 0px 9px; 是你要找的。

- user3047498

Answer 3

尝试使用 border-radius 生成器 https://border-radius.com

- Daniel Danielecki

---

完美简单的解决方案 - undefined

Answer 4

你只需要将以下 CSS 粘贴到你的代码中，下面是一个示例或者访问 https://codepen.io/Chandrakant1594/pen/yEpxOp。

<style>
.curved-border {
 height: 200px;
  width: 400px;
  background: #000000;
  border: 3px solid;
  box-shadow: inset 0px -1px 0px black; /* just to make the bottom border look thicker */
  margin-bottom: 4px;
}
.sample1 {
  border-radius: 1500% 1500% 280% 280%/280% 280% 40% 40%;
}
.sample2 {
  border-radius: 0% 0% 100% 100%/0% 0% 30% 30%;
}
</style>
<div class='curved-border sample1'></div>
<div class='curved-border sample2'></div>

- Chandrakant Patil

Answer 5

将元素的边框半径与其大小组合，并为moz和其他浏览器添加特定标签。

示例在此处

HTML

 <div class="banner">

    </div>

CSS 类

 .banner{
      background-color:black;
      width:100%;
      border-radius:40px 40px 0px 0;
      height:40px;
    }

https://jsfiddle.net/w7o2rbcu/5/

- Juan