Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影
目錄
- 前言
- 一、圓角邊框
- （一）border-×-×-radius
- （二）border-radius
- 二、陰影
- （一）基本陰影設置
- （二）內部陰影設置
- 結語
前言
本節介紹僅在CSS3中的新內容，例如圓角邊框、盒子陰影等等。
一、圓角邊框
（一）border-×-×-radius
可以通過border-top/bottom-left/right-radius屬性來對邊框的四個角進行圓角處理，前提是要定義border屬性，即有邊框才有效。
從邊框的四個角分為以下四個屬性：
border-top-left-radius:（左上角圓角）
border-top-right-radius:（右上角圓角）
border-bottom-left-radius:（左下角圓角）
border-bottom-right-radius:（右下角圓角）
這里的radius即為圓角，它一般通過兩個數值來設置圓角的弧度，第一個數值是水平距離，第二個數值是垂直距離，如下圖，：
例如，下列html代碼和css代碼：
css代碼：
html代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/style.css" /> </head><body><div>HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W.Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺 (如UNIX， Windows等)。</div> </body></html>運行結果如下，可看到我們設置的圓角邊框：
（二）border-radius
當然也可以只設置其中一個值或三個值以及四個值，一個值即代表四個圓角的值相同，設置三個值時，左右兩個值表示左上角和右下角，之間的值表示右上角和左下角。
不指定圓角方向時，即border-radius:，這樣設置就是對默認四個圓角弧度進行處理，如下：
運行結果如下：
二、陰影
（一）基本陰影設置
通過box-shadow:屬性對邊框進行陰影處理，其值有以下常見幾種：
box-shadow:h-shadow（定義水平陰影偏移值，可以為負值）
box-shadow:v-shadow（定義垂直陰影偏移值，可以為負值）
box-shadow:blur（定義陰影的模糊大小）
box-shadow:spread（定義陰影的大小）
box-shadow:color（定義陰影的顏色）
例如，下列html代碼和css代碼：
css代碼中，設置水平陰影和垂直陰影都為10px，模糊大小為2px，陰影大小為5px，顏色為特定值：
hrml代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/style.css" /> </head><body><div>HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W.Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺 (如UNIX， Windows等)。</div> </body></html>運行結果如下：
（二）內部陰影設置
另外還有box-shadow:inset值，它是設置陰影為內部陰影，默認情況下，該值是box-shadow:outside，即陰影為外部陰影。
例如，css代碼中，設置水平和垂直偏移為負數，并加上設置為內部陰影box-shadow:inset值：
運行結果如下：
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
總結
以上是生活随笔為你收集整理的Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端开发笔记——第三章 CSS语言
- 下一篇： Web前端开发笔记——第三章 CSS语言