当我想到为我的链接制作标签（或标签）时，我正在处理我网站的 CSS。我在这个例子中删除了文本，但这基本上是一个导航栏。图片如下：
我的问题是，如何在黑色箭头指向的地方获得“边界半径”效果，并且看起来像蓝色箭头指向的效果？是否有某个 webkit 命令可以帮助我，或者我应该将其设为 img 还是 jquery？
非常感谢！（我画了一些漂亮的箭头，对吧？）
【问题讨论】：
不使用原生border-radius。如 MDN "Negative values are invalid" 所述。您绝对可以在那里寻找一个自动为您执行此操作的库（尽管我发现 Philip 建议的库中采用的方法特别过时）。
Using pure CSS I have come up with an approach。这个想法是在你的容器中添加 4 个额外的元素，将它们的背景设置为与页面背景相同的颜色（这样就不会让下面的页面内容过滤掉——为此，你需要 SVG 遮罩或类似的东西），然后position 它们位于元素本身之外。然后我们应用一个border-radius，它会产生影响：
#main {
margin: 40px;
height: 100px;
background-color: #004C80;
position: relative;
overflow: hidden;
}
#main div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #FFF;
}
.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }<div id="main">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom left"></div>
<div class="bottom right"></div>
</div>【讨论】：
如果你的元素只有背景色，你可以使用伪元素和 box-shadow。
伪元素上的阴影可以填充元素。 示例：http://codepen.io/gcyrillus/pen/hlAxo、http://codepen.io/gc-nomade/pen/dtnIv、http://codepen.io/gcyrillus/pen/yJfjl。
添加线性渐变，您可以绘制一个类似于您所寻找的可以增长任何高度的框：http://codepen.io/anon/pen/cIxwD。
div {
width:800px;
margin:auto;
position:relative;
overflow:hidden;
min-height:2000px;
background:linear-gradient(to bottom,
rgba(255,255,255,0) 0,
rgba(255,255,255,0) 100px,
orange 100px,
orange
);
}
div:before,
div:after
{
content:'';
position:absolute;
top:0;
height:30px;
width:60px;
box-shadow: 0 0 0 500px orange;
border-radius:0 0 0.5em 0;
}
div:after {
right:0;
border-radius: 0 0 0 0.5em;
}
【讨论】：
你可以使用这个插件。 http://jquery.malsup.com/corner/（使用 jquery）
然后执行以下操作：
$(this).corner("bite");
需要 jQuery 和 jQuery Corner！
【讨论】：