如何使用HTML添加圓角

<body> <h1 style="float:left; width:37%;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h1> <div style="float:left; class="websiteart"><img src="website_art.png" height= "100" width= "300"/></div> <h1 style="float:right;"><font color="#99CC00"><font face="Verdana">The Art of Gaming</font></h1> </body>

您可以使用CSS border-radius

jsFiddle

.websiteart img{ 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
}

來源

2013-06-20 18:34:05

不需要前綴版本，只需'border-radius'就可以了。 – lifetimes

如果您希望它可以與較舊的瀏覽器版本一起使用，您仍然必須添加前綴版本。 http://docs.webplatform.org/wiki/css/properties/border-radius#Compatibility –

確實如此，但'-moz-'之一在FF v13中被刪除了。我們現在在FF v21上。該'-webkit-'一個是路才下降甚至... – lifetimes

您還可以使用border-radius與「EM」符號，這是我最喜歡的，因爲我覺得它更容易。例如：

-moz-border-radius: 0.5em; 
-webkit-border-radius: 0.5em; 
-khtml-border-radius: 0.5em; 
border-radius: 0.5em;

在這種情況下，您將獲得完美的圓角。

來源

2013-06-20 18:59:35

如何使用HTML添加圓角

回答

相關問題