實(shí)現(xiàn)CSS圓角外凸的方法

在CSS中，我們可以使用border-radius屬性來創(chuàng)建圓角，默認(rèn)情況下，這個(gè)屬性只會(huì)創(chuàng)建內(nèi)凸的圓角，為了實(shí)現(xiàn)外凸的圓角，我們需要使用一個(gè)小技巧。

我們需要?jiǎng)?chuàng)建一個(gè)比元素本身更大的圓形，并將其設(shè)置為元素的背景，我們可以使用border-radius屬性在元素的邊框上創(chuàng)建內(nèi)凸的圓角，我們將元素的背景設(shè)置為透明，這樣就能看到外凸的圓角了。

下面是一個(gè)示例代碼：

HTML:

<div class="outer-radius-div"></div>

CSS:

.outer-radius-div {
  width: 200px;
  height: 200px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAADElEQVQYGWNgGEYAAADNAAGVVebMAAAAAElFTkSuQmCC);
  border-radius: 50%;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)200px * 200px的元素，并將其背景設(shè)置為一個(gè)比元素本身更大的圓形，我們使用border-radius屬性在元素的邊框上創(chuàng)建內(nèi)凸的圓角，我們將元素的背景設(shè)置為透明，這樣就能看到外凸的圓角了。

需要注意的是，這種方法只在CSS3中可用，并且需要瀏覽器的支持，在使用這種方法之前，請確保您的瀏覽器支持CSS3。