CSS3-邊框（border-radius、box-shadow、border-image）
阿新 • • 發佈：2018-03-14
第一個 ado inset 右上角 OS 是否 col 允許 -a
CSS3中的邊框屬性：border-radius、box-shadow、border-image
圓角：border-radius
使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"。
如果你在 border-radius 屬性中只指定一個值，那麽將生成 4 個 圓角。
但是，如果你要在四個角上一一指定，可以使用以下規則：
- 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
- 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
- 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
- 一個值： 四個圓角值相同
css3圓角屬性：
| 屬性 | 描述 |
|---|---|
| border-radius | 所有四個邊角 border-*-*-radius 屬性的縮寫 |
| border-top-left-radius | 定義了左上角的弧度 |
| border-top-right-radius | 定義了右上角的弧度 |
| border-bottom-right-radius | 定義了右下角的弧度 |
| border-bottom-left-radius | 定義了左下角的弧度 |
盒陰影：box-shadow
box-shadow屬性可以設置一個或多個下拉陰影的框，
語法：box-shadow: h-shadow v-shadow blur spread color
boxShadow 屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。
| 值 | 說明 |
|---|---|
| h-shadow | 必需的。水平陰影的位置。允許負值 |
| v-shadow | 必需的。垂直陰影的位置。允許負值 |
| blur | 可選。模糊距離 |
| spread | 可選。陰影的大小 |
| color | 可選。陰影的顏色。 |
| inset | 可選。從外層的陰影（開始時）改變陰影內側陰影 |
邊界圖片：border-image
有了 CSS3 的 border-image 屬性，你可以使用圖像創建一個邊框，border-image 屬性允許你指定一個圖片作為邊框，用於創建上文邊框的原始圖像。
border-image屬性是速記屬性用於設置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值，省略的值設置為它們的默認值。
語法：border-image: source slice width outset repeat|initial|inherit;
| 值 | 描述 |
|---|---|
| border-image-source | 用於指定要用於繪制邊框的圖像的位置 |
| border-image-slice | 圖像邊界向內偏移 |
| border-image-width | 圖像邊界的寬度 |
| border-image-outset | 用於指定在邊框外部繪制 border-image-area 的量 |
| border-image-repeat | 用於設置圖像邊界是否應重復（repeat）、拉伸（stretch）或鋪滿（round）。 |
CSS3-邊框（border-radius、box-shadow、border-image）