css形狀的邊框

我發現了css形狀，我感興趣的是有沒有辦法爲它們製作邊框（實線，虛線，虛線）（shapes）？css形狀的邊框

我已經做過的第一件事是製作另一個形狀並將它放在z-index（http://jsfiddle.net/gYKSd/）的背景上，但它僅作爲實心邊框發揮作用。

HTML：

<div class="triangle"></div> 
<div class="background"></div>

CSS：

 .triangle { 
     position: absolute; 
     top: 14px; 
     left: 10px; 
     height: 0px; 
     width: 0px; 
     border-right: 50px solid transparent; 
     border-left: 50px solid transparent; 
     border-bottom: 100px solid red; 
     z-index: 0; 
} 
     .background { 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 0px; 
     width: 0px; 
     border-right: 60px dotted transparent; 
     border-left: 60px dotted transparent; 
     border-bottom: 120px dotted gray; 
     z-index: -1; 
    }

來源

2013-10-18 Vadim Kalinin

基本上你形狀的角度提出不能做到這一點，因爲元素是由邊界組成的......而邊界不能有另一個邊界。這並不是說你不能通過添加額外的元素來「僞裝」，但這不是你問的。 –

CSS形狀是一種破解。 CSS不是爲繪製形狀而設計的。當然，如果你一定要用它來做基本的三角形。其他人都會說。但不要指望它能夠更進一步，因爲你不能;黑客的本質是，它是一樣好。如果你想要的東西比這更多，使用瀏覽器的適當的圖形工具，如SVG。 – Spudley

@Paulie_D對不起，我不清楚。但我的意思是伎倆來解決這個任務。 –

您的解決方案（定位背景div）是關於您將在CSS中獲得的最可行的方式，因爲瀏覽器無法將形狀識別爲形狀。

你可以做一個方塊，製作副本並旋轉它們以形成一個點爆發，它看起來像一個點爆發，但就瀏覽器而言，你有3個正方形，而不是一個點爆發，如果你放一個邊界，邊界將在每個方格周圍。

您可以製作小矩形，旋轉它們並將它們放置在「形狀」的邊緣以創建「邊框」，所以是的，它是可行的，但對於所有實際用途而言，它是瘋狂的。

如果您需要動態繪製形狀，請查看HTML5畫布Intro to canvas drawing。

SVG現在是一個有效選項以及since all recent browsers support it。

來源

2013-10-18 17:03:38 Sylverdrag

和SVG :)和+1 – FelipeAls

謝謝。你是對的。由於瀏覽器的支持不佳，我放棄了svg，但看起來這已經不是近期瀏覽器的問題了。 – Sylverdrag

@Sylverdrag你知道什麼是資源要求更高的畫布或SVG。因爲我從來沒有使用過SVG，但我曾經用過畫布，而且看起來並不像快。 –

我不認爲這是可能的，因爲你在做什麼依賴於一個事實，即形狀在邊境製造。

您不能添加邊界到已經是邊界的邊界。

但是就像您在小提琴中展示的一樣，您可以通過背景形狀來模擬另一個邊框。

來源

2013-10-18 16:07:18 Overcode

作爲幾個上面說的.... CSS形狀與固體邊界和那些撞在了一起，所以你不能改變邊框樣式，或者您會不會產生你想要

來源

2013-10-18 17:12:54 dougmays

css形狀的邊框

回答

相關問題