css圓角邊框程式碼怎麼寫？ （程式碼範例）
- 藏色散人原創
- 2018-08-13 16:52:514408瀏覽
本篇文章主要來跟大家介紹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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn