使用 CSS3 插入邊框半徑

Question

有沒有辦法用 css3 創建插入邊框半徑？ （沒有圖像）

我需要這樣的邊界半徑：

Answer 1

根據 Lea Verou 的說法，我發現使用所有 CSS 和 HTML（無圖像等）實現此目的的最佳方法是使用 CSS3 漸變。 從她的解決方案：

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

最終結果是一組帶有曲線的透明漸變。 請參閱完整的JSFiddle以獲取演示並試用它的外觀。

顯然這取決於對rgba和gradient的支持，因此應該被視為漸進式增強，或者如果它對設計至關重要，您應該為舊瀏覽器（尤其是 IE，它甚至不支持gradient ）提供基於圖像的回退到 IE9）。

Answer 2

您可以通過將透明圓形元素絕對定位在帶有框陰影的角落來實現這一點。 我使用了包含跨度、框陰影、邊框和偽選擇器的隱藏溢出div的組合。

看看我的例子。

這是您入門所需的基本 HTML 和 CSS：

 a { display: inline-block; width: 250px; height: 100px; background: #ccc; border: 2px solid #000; position: relative; margin: 10px; } a div { position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%; } a div:after { content: ''; background: #000; width: 2px; height: 75px; position: absolute; top: 12.5px; } a div:first-of-type { left: -14px; } a div:first-of-type:after { left: 0; } a div:last-of-type { right: -14px; } a div:last-of-type:after { right: 0; } a span { display: block; width: 30px; height: 30px; background: transparent; position: absolute; bottom: -20px; right: -20px; border: 2px solid #000; border-radius: 25px; box-shadow: 0 0 0 60px #ccc; } a div:first-of-type span { left: -20px; } a div:first-of-type span:first-child { top: -20px; } a div:first-of-type span:last-child { bottom: -20px; } a div:last-of-type span { right: -20px; } a div:last-of-type span:first-child { top: -20px; } a div:last-of-type span:last-child { bottom: -20px; }

 <a href=""> <div> <span></span> <span></span> </div> <div> <span></span> <span></span> </div> </a>

Answer 3

我不認為如果角落必須是透明的，這是不可能的，但是如果背景是已知的，你可以在每個角落創建一個帶有圓形邊框的 div。 如果這些 div 被賦予與頁面背景相同的背景顏色，效果就會起作用。

在此處查看我的示例http://jsfiddle.net/TdDtX/

 #box { position: relative; margin: 30px; width: 200px; height: 100px; background: #ccc; border: 1px solid #333; }.corner { position: absolute; height: 10px; width: 10px; border: 1px solid #333; background-color: #fff; }.top-left { top: -1px; left: -1px; border-radius: 0 0 100% 0; border-width: 0 1px 1px 0; }.top-right { top: -1px; left: 190px; border-radius: 0 0 0 100%; border-width: 0 0 1px 1px; }.bottom-left { top: 90px; left: -1px; border-radius: 0 100% 0 0; border-width: 1px 1px 0 0; }.bottom-right { top: 90px; left: 190px; border-radius: 100% 0 0 0; border-width: 1px 0 0 1px; }

 <div id="box"> <div class="corner top-left"></div> <div class="corner top-right"></div> <div class="corner bottom-left"></div> <div class="corner bottom-right"></div> </div>

Answer 4

看起來這不可能。 我嘗試了一個負值的 border-radius 只是為了看看會發生什么但它沒有效果。

編輯：

即使您將盒子分解成更小的部分，在某些時候您仍然需要創建一個透明的插入角。 透明度是一個棘手的部分，它可能會阻止在沒有圖像的情況下實現這一點。 基本上，你必須能夠渲染一個透明的圓圈，周圍有一個不透明的背景（如果這在 CSS 中可行，我很想知道怎么做：）

如果您不需要透明度，也有辦法做到這一點。

Answer 5

您可以使用新的 css3-Border-images 實現這種效果（好吧，它是圖像，但它可以毫無問題地縮放）。 但這是相當新的，還沒有得到廣泛支持（在所有體面的瀏覽器中（准確地說是 IE 除外；））。

一篇關於csstricks邊框圖像的好文章。

瀏覽器支持

Answer 6

 body { background: #fff; }.div{ position:relative; }.box { background: #f7f7f7; height: 178px; width: 409px; margin: 25px; /*padding: 20px;*/ position: relative; overflow: hidden; border: 1px solid #ccc; border-left: 0px; }.box:before { content: ""; display: block; background: #fff; position: absolute; top: -33px; left: -263px; width: 300px; height: 242px; border-radius: 300px; border: 1px solid #ccc; }

 <div class="div"> <div class="box"></div> </div> </body> </html>

這里的例子

Answer 7

嗯，你可以在這里使用這個小技巧來創建Inset Border Radius

然后為了支持透明度，您可能必須在兩者之間添加其他塊。 或多或少像舊的圓形圖像過去的處理方式； 透明圖像的每個角落都有一個跨度。 並跨越兩側和頂部以填補空白。 您可以使用這個技巧在 CSS 中完成它，而不是使用圖像。

Answer 8

 body { background: #fff; }.div{ position:relative; }.box { background: #f7f7f7; height: 178px; width: 409px; margin: 25px; /*padding: 20px;*/ position: relative; overflow: hidden; border: 1px solid #ccc; border-left: 0px; }.box:before { content: ""; display: block; background: #fff; position: absolute; top: -33px; left: -263px; width: 300px; height: 242px; border-radius: 300px; border: 1px solid #ccc; }

 <div class="div"> <div class="box"></div> </div> </body> </html>