CSS3-邊框(border-radius、box-shadow、border-image)
阿新 • • 發佈:2018-03-14
第一個 ado inset 右上角 OS 是否 col 允許 -a
inset;
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)