Question

我有一个css代码：

-moz-border-radius-topleft:50px;

我得到了结果：

rounded corner

有没有可能这样给出：

inverted rounded corner

Answer 1

只是为了更新这个，似乎你可以通过多种方式。

Lea Verou posted a solution

Here is mine using border-image

使用边框图像

<强> HTML

<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>

<强> CSS

div {
    width: 200px;           
    border-width: 55px;
    -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    margin: 50px auto;   
}

使用径向渐变

Lea Verou's solution

<强> HTML

<div class="inner-round"></div>

<强> CSS

.inner-round {
    background-image:
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

Answer 2

在现代浏览器中，您可以使用mask-image：

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

<div id="aux-container"></div>

http://jsbin.com/eViJexO/1/

此外，请查看http://www.html5rocks.com/en/tutorials/masking/adobe/，其中介绍了如何使用mask-box-image获得类似结果。

Answer 3

您还可以使用inline svg和path element：

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}

<svg viewbox="0 0 10 10">
  <path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>

在这个例子中，我使用cubic bezier curve作为倒圆边。

使用这种方法，您还可以用图像填充形状或渐变：

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="clip">
      <path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>

Answer 4

不幸的是，目前还没有基于官方或实施的CSS规范的解决方案:(

然而，正如其他人已经添加的那样，有可能使用JS库或复杂的HTML / CSS实现来实现相同效果的解决方案（或作弊？）。我在寻找一种方法来制作比OP更复杂的角而不使用图像时遇到了这个问题。

我已经在webkit网站上提交了一个错误（功能请求） - 因为似乎还没有提交过。

Bug 62458 - Feature Request: Inverse rounded corners

Answer 5

对于普通的背景颜色，你实际上可以使用伪元素和框阴影来绘制背景颜色，并且它不会隐藏父容器的背景，你实际上会看到它们通过

你需要的是一个理解的浏览器：在/：之后和box-shadow :) ...

对于IE8，您可以绘制hudge边框而不是阴影。 http://codepen.io/anon/pen/fFgDo

盒子阴影方法：http://codepen.io/anon/pen/FwLnd

div { margin:2em; /* keep it away from sides to see result */ padding:2em;/* for test to size it when empty */ position:relative; /* reference to set pseudo element where you wish */ overflow:hidden;/* you do not want the box-shadow all over the page */ } div:before { content:''; position:absolute; width:80px; height:80px; top:-40px; left:-40px; border-radius:100%; box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */ }

伪元素可以采用任何形状，并通过css进行转换并设置其元素中的任何位置以绘制通孔：示例：http://codepen.io/gc-nomade/pen/nKAka

Answer 6

这可以通过radial gradient完成。

div {
  width: 20vw;
  height: 20vw;
  background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}

<div></div>

只是为了好玩，可以通过定义多个背景（每个角一个背景）来添加其他倒角：

div {
  width: 40vw;
  height: 40vw;
  position: relative;
  background-color: darkblue;
  --circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: var(--circle), var(--circle), var(--circle), var(--circle);
  background-size: 18vw 18vw;
  background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
  background-repeat: no-repeat;
}

<div></div>

Answer 7

有些方法可以通过使用CSS来解决这个问题 - 但是如果你有一个背景模式，它可能会稍微复杂一些，这取决于背景的颜色（如果它更容易实现）。

我在这里介绍了如何制作Inverse Border Radius in CSS (here)的基本示例。这使用了一个大小为Border的技巧来使用内部，你可能需要做一些定位才能让它正常工作，但是你可以看到它的可能性。特别是如果您为每个background-color指定span。

如果您想要所有4个角，则必须为div中的每个span添加一个单独的类，每个类将模拟一个角，左上角，右上角等。

Answer 8

没有。如果您有纯色背景，则可以使用css创建咬合否则，你可以使用PNG做任何特别的事情，就像你在border-radius之前创建圆角一样。

Answer 9

实际上有一种方式，就像这样：

<div style="background-color: red;height: 12px; width: 12px;">
    <div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
        -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
    </div>
</div>

但正如@Domenic所说，你需要一个坚实的背景，否则你会得到这个：

<div style=" background-color:#666">
  <div style="background-color: red;height: 12px; width: 12px;">
    <div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
        -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
    </div>
</div>

Answer 10

可以使用after元素完成。 at Load-Time Public Function GetSelectedSlicerItems(SlicerName As String) As String Dim SL As SlicerCacheLevel Dim sI As SlicerItem Set SL = ActiveWorkbook.SlicerCaches(SlicerName).SlicerCacheLevels(1) For Each sI In SL.SlicerItems If sI.Selected = True Then GetSelectedSlicerItems = (sI.Value) End If Next End Function Dim sValue As String sValue = GetSelectedSlicerItems("Slicer_HeaderTitle")

Answer 11

不，没有。

在CSS中反转圆角？

11 个答案:

使用边框图像

使用径向渐变