邊框、背景、漸變、過渡
阿新 • • 發佈：2018-12-14
邊框圖片（border-image）
border-image 設定邊框的背景圖片.
border-image-source 設定邊框圖片的地址.
border-image-repeat 影象邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)
border-image-outset 邊框影象區域超出邊框的量
border-image-width 圖片邊框的寬度
border-image-slice 圖片邊框向內偏移（裁剪圖片）
背景（background）
background-origin 定位背景影象
background-origin | 值 | 描述 |
|---|---|
| padding-box | 背景影象相對於內邊距框來定位。 |
| border-box | 背景影象相對於邊框盒來定位。 |
| content-box | 背景影象相對於內容框來定位。 |
background-clip 規定背景的繪製區域
background-clip: border-box|padding-box|content-box; | 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到邊框盒。 |
| padding-box | 背景被裁剪到內邊距框。 |
| content-box | 背景被裁剪到內容框。 |
background-size 規定背景影象的尺寸
background-size: length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length |
設定背景影象的高度和寬度。 第一個值設定寬度，第二個值設定高度。 如果只設置一個值，則第二個值會被設定為 “auto”。 |
| percentage | 以父元素的百分比來設定背景影象的寬度和高度。 第一個值設定寬度，第二個值設定高度。 如果只設置一個值，則第二個值會被設定為 “auto”。 |
| cover | 把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。 背景影象的某些部分也許無法顯示在背景定位區域中。 |
| contain | 把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。 |
多背景
left top 左上
right top 右上
right bottom 右下
left bottom 左下
center center 中間
漸變（gradient）
線性漸變（linear-gradient）
background-image: linear-gradient(to left,yellow,green);
background-image: linear-gradient(45deg,green,yellow);
45deg：45度傾斜漸變
background-image: linear-gradient(to left,yellow,deeppink,purple,skyblue);
background-image: linear-gradient(120deg,yellow 0%,yellow 25%,pink 25%,pink 50%,
purple 50%,purple 75%,skyblue 75%,skyblue 100%);
background: linear-gradient(180deg,yellow,deeppink,purple,skyblue);
徑向漸變（radial-gradient）
background-image: radial-gradient(at center,yellow,green);
關鍵詞：at
位置：center、left top、right top、right bottom、left bottom
background-image: radial-gradient(at left top,yellow,green);
background-image: radial-gradient(at 50px 50px,yellow 0%,green 50%,red 100%);
50px 50px：漸變位置
background-image: radial-gradient(100px 50px at center,yellow,green);
100px：漸變範圍
100px 50px：漸變範圍橢圓顯示
過渡（transition）
簡寫
transition: property duration timing-function delay;
transition-property 過渡屬性
transition-duration 過渡時間
transition-timing-function 過渡速度
| 值 | 描述 |
|---|---|
| linear | 勻速 |
| ease | 平滑過渡 |
| ease-in | 由慢變快 |
| ease-out | 由快變慢 |
| ease-in-out | 由慢變快又變慢 |