div如何設定css圓角邊框? css設定4個圓角方法有哪些?這對於剛入門的css新手,比較陌生,那麼css怎麼設定4個圓角?下面我們來看看css設定4個圓角方法。 【推薦學習:CSS3教學】
CSS3圓角用於透過使用border-radius屬性為主體或文字添加特殊顏色的角。圓角的簡單語法如下:
#rcorners7 { border-radius: 60px/15px; background: #FF0000; padding: 20px; width: 200px; height: 150px; }
下表顯示了圓角的可能值,如下所示:
##例,此屬性可以有三個值。以下範例使用兩個值:
<html> <head> <style> #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(/css/images/logo.png); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p id = "rcorners1">Rounded corners!</p> <p id = "rcorners2">Rounded corners!</p> <p id = "rcorners3">Rounded corners!</p> </body></html>
效果如下:
<html> <head> <style> #rcorners1 { border-radius: 15px 50px 30px 5px; background: #a44170; padding: 20px; width: 100px; height: 100px; } #rcorners2 { border-radius: 15px 50px 30px; background: #a44170; padding: 20px; width: 100px; height: 100px; } #rcorners3 { border-radius: 15px 50px; background: #a44170; padding: 20px; width: 100px; height: 100px; } </style> </head> <body> <p id = "rcorners1"></p> <p id = "rcorners2"></p> <p id = "rcorners3"></p> </body><body>效果如下:
以上是css怎麼設定4個圓角? css設定4個圓角方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!