CSS - 圆形背景

Question

这可能在CSS吗？

如果是，该怎么做？我试过.logo { left:0; top:0; height:100%; width:100px; } <div class="logo" style="background:url('/assets/images/site-logo.png') center center no-repeat;"> <img src="/site/logo.png" style="display:none;" /> </div> ，但不一样。

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

Answer 2

我认为border-radius: 10px 10px 0px 9px;正是您所寻找的。

Answer 3

将边框半径与元素大小合并，并为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 4

您只能将以下css粘贴到您的代码中 blelow是示例或访问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