CSS

Question

在 CSS 中可以吗？

如果是，怎么办？我试过 border-top-left-radius 但不一样。

Answer 1

我想 border-radius: 10px 10px 0px 9px; 就是您要找的。

Answer 2

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

此处示例

html

 <div class="banner">

    </div>

css class

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

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

Answer 3

您可以非常接近地设置 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

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>

Answer 5

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

CSS - 圆形背景

CSS - rounded background

html

background

css-shapes