css怎麼達到圓角邊框和圓形效果？ （圖文+影片教學）
- 藏色散人原創
- 2018-09-13 16:41:3713137瀏覽
css圓角邊框的效果通常會用在前端網頁設計中的導覽列或提示框等部分。透過css設定圓角邊框或圓角圖片的效果實現，能使整體網頁頁面顯得更加豐富。
這篇文章就跟大家介紹如何使用css設定圓角邊框的效果。下面我們透過具體的程式碼範例為大家進行相關知識詳解。
css圓角邊框程式碼範例如下：
範例1：css單邊圓角邊框效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css圆角边框代码示例</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: #A6E22B;
margin: 20px auto;
/*实现单边圆角*/
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>在上述程式碼中，我們建立了一個邊長為200的正方形。當我們只加入一個css樣式border-top-left-radius為20px時，則會實現這個div左上圓角效果。如下圖：
當我們再繼續加入一個css樣式border-top-right-radius為20px時，則會實現只給上面加上圓角的效果。如下圖：
然後我們再繼續加入兩個css樣式分別為border-bottom-left-radius和border-bottom-right-radius後，即上述程式碼在瀏覽器實現的最終效果就如下圖：
那麼透過上述一系列的描述，大家是否發現了關於css圓角邊框重要的知識點？那就是border-radius 屬性！這個屬性是一個簡寫屬性，它是用來設定四個 border-*-radius 屬性。此屬性就是為元素添加圓角邊框的！
範例2：css圓形邊框效果
/*同时实现四个边圆角*/ border-radius: 100px;
在範例1的html程式碼基礎上，我們給邊長200px的正方形div區塊只新增一個css border -radius樣式屬性，並設定值為100px即表示半徑設為100px。則呈現效果如下圖：
這篇文章就是關於css設定圓角邊框的具體介紹，希望對需要的朋友有幫助！更多HTML/css知識，可以關注PHP中文網 HTML影片教學與CSS影片教學
以上是css怎麼達到圓角邊框和圓形效果？ （圖文+影片教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！