CSS形狀是現實嗎？

我一直在找網站在談論CSS-Shapes;其中的想法是，而不是矩形我可以使用CSS來創建文本，採取了一些形狀，如圓形。但是我發現的網站有一些不起作用的代碼。然後當我看着他們自己的源代碼時（因爲他們在他們的網站上有例子），結果發現他們所有的例子都是圖片 - 而不是實際的代碼。所以我在這裏問。這個CSS形狀是真實的嗎？我想在半圓內呈現文字。這就是我發現CSS-Shapes的方式。CSS形狀是現實嗎？

來源

2014-12-27 Katedral Pillon

只能通過實驗。 http://caniuse.com/#feat=css-shapes –

只要注意規格：http://dev.w3.org/csswg/css-shapes/ –

我不認爲這個問題太寬泛。這是一個關於CSS樣式是否被瀏覽器支持的具體問題。獲得相同結果的任何可能的解決方案都不是問題的真正組成部分。答案很高興，但這不是必需的。提名重新開放 – Joeytje50

要創建一個半圓，你可以創建一個<div>元素，並與圓角半徑的款式吧，這樣的事情：

#semicircle { 
    width: 200px; 
    height: 100px; 
    border-radius: 100px 100px 0 0; 
    background: green; 
}

然後，如果你希望把一些文字在它你可以插入一個<span>裏面，所以HTML看起來像這樣：

<div id="semicircle"> 
    <span>Some text</span> 
</div>

，然後風格來定位它的文字，你希望父<div>內。

來源

2014-12-27 21:32:50

雖然這不會將文字包裝到半圓。 –

是的，沒有。「真正的」CSS形狀並不受衆多瀏覽器支持。

見http://caniuse.com/#feat=css-shapes

，而圓形也可以通過添加圓角元素，這是由所有主要的瀏覽器，包括IE9支持做出。

請參見：http://caniuse.com/#feat=border-radius

所以，除非你需要這個在IE8中工作過，你可以在純CSS圓圈添加文本。而對於IE8，文本也會顯示出來，只能以正方形或矩形而不是圓形顯示，因此這可能是您可以接受的回退。

你沒有給一個特定的網站命名，但很多時候，關於網站開發的網站將會有關於新功能的文章，這些新功能可能不支持（或不廣泛）被支持，這也是爲什麼他們可以有圖像來顯示什麼一旦它變得可用，它將看起來像。

正如Niet the Dark Absol在評論中指出的那樣，border-radius解決方案實際上並沒有將文本包裝成圓形。該文本的行爲就像該元素仍然是矩形。如果您需要使文本遵循圓形，並且需要對當前一代瀏覽器的支持，則需要JavaScript的幫助。 TextMorph library似乎有伎倆。我只是搜索了它，所以我沒有經驗，但它看起來很詭異。

來源

2014-12-27 21:33:02 GolezTrol

儘管如此，'border-radius'不會將文本包裝到圓圈中。 –

@NiettheDarkAbsol沒錯，我錯過了這個要求。我不認爲現在可以使用真正的CSS解決方案。所以在這種情況下，問題的實際答案將是「否」，但我會保留當前的上下文答案。 ;） – GolezTrol

的確，我目前使用'border-radius'，它不起作用。 –

CSS形狀是現實嗎？

回答

相關問題