本篇文章主要來跟大家介紹css邊框效果怎麼達成的。
css圓角邊框程式碼具體範例如下:
<!DOCTYPE HTML> <html lang="en"> <head> <title>css圆角边框代码实例</title> <meta charset="UTF-8"> <style type="text/css"> div { color: white; text-align:center; border:2px solid #a1a1a1; padding:10px 40px; background: #029789; width:350px; border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ } </style> </head> <body> <div>css边框设置使用border-radius 属性即可向元素添加圆角。</div> </body> </html>
效果如下圖:
這裡涉及主要的屬性就是border-radius,利用此屬性可進行css圓角邊框調節的功能。
附註:border-radius的使用方法:
border-radius: 1-4 length|% / 1-4 length|%;
依此順序設定每個 radii 的四個值。如果省略 bottom-left,則與 top-right 相同。如果省略 bottom-right,則與 top-left 相同。如果省略 top-right,則與 top-left 相同。
-webkit-border-radius 是為了相容於 chrome 或 safari。
-moz-border-radius 是為了相容於火狐。
以上就是關於css圓角邊框程式碼的具體介紹,希望對有需要的朋友有幫助。
以上是css圓角邊框程式碼怎麼寫? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!