# CSS 背景 漸層 框線 2019-12-13 ###### tags: `HTML` `CSS` --- ## 背景 ### 背景顏色：background-color ==語法 background-color : 顏色值（色彩名稱、16進位碼或RGB）== --- ### 背景圖片 background-image ==語法 background-image : url(圖片檔名及路徑)== --- ### 背景重複 background-repeat ==語法 background-repeat : no-repeat / repeat-x / repeat-y / repeat== --- ### 背景圖片位置：background-position * 水平位置「lert」、「center」及「right」 * 垂直位置「top」、「center」及「bottom」 ==語法 style="background-image: url(image/hamster.png); background-repeat: no-repeat; background-position: 10% 50%"== 左右 上下 ### 固定圖片位置 background-attachment ==語法 background-attachment: fixed;== --- ### 透明度：opacity * 數值介於0.0（透明）~ 1.0（不透明）之間 --- ### 線性漸層：linear-gradient / 重複線性漸層：repeating-linear-gradient ==語法 background: linear-gradient(方向, 漸層顏色1, 漸層顏色2, …)== ==語法 background: repeating-linear-gradient(方向, 漸層顏色1, 漸層顏色2, …)== * 方向設定有兩種： * 「to right / top / left / bottom」 * 利用角度變化方向，單位為deg 上 　0 deg　右 90 deg 下 180 deg　左 270 deg * 顏色設定可以多組設定，以「, 」區隔，另還可以加上寬度，寬度可以用數值（單位px）或是百分比（%）表示，若不設定寬度則由每個顏色均分 練習: ```htmlmixed= <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size: 14px; text-align: center;color:white; padding: 20px; margin-bottom: 10px; } .linear1 { background: linear-gradient(to bottom,yellow,green); } .linear2 { background: linear-gradient(0deg,yellow,green); } .linear3 { background: linear-gradient(to right bottom,yellow,green); } .linear4 { background: linear-gradient(to left,yellow 30%, green 70%); } .linear5 { background: linear-gradient(to right, red,orange, yellow, green, blue, indigo, violet); } </style> </head> <body> <div class="linear1">向下漸層</div> <div class="linear2">指定角度漸層</div> <div class="linear3">對角線漸層</div> <div class="linear4">指定範圍漸層</div> <div class="linear5">多層漸層</div> </body> ``` >顯示如下: >![](https://i.imgur.com/WgDsSlx.png) --- ### 放射性漸層：radial-gradient * 形狀設定值有「**circle**」圓形和「**ellipse**」橢圓形兩種 ==語法 background: radial-gradient( circle, red)== 練習: ```css= /*放射狀漸層 Style*/ .radial1 { background: radial-gradient( circle,red, yellow, green); } .radial2 { background: radial-gradient( ellipse,red, yellow, green); } ``` * 中心點及半徑設定 * **closest-corner**：中心點到最近的角當半徑 * **closest-side**：中心點到最短邊的長度當平徑 * **farthest-corner**：中心點到最遠的角當半徑 * **farthest-side**：中心點到最長邊的長度當平徑 練習: ```htmlmixed= <style> /*中心點與半徑放射漸層*/ .radial3 { background: radial-gradient( closest-side at 70% 50%, red, yellow, green); } .radial4 { background: radial-gradient( farthest-side at 70% 50%, red, yellow, green); } .radial5 { background: radial-gradient( closest-corner at 70% 50%, red, yellow, green); } .radial6 { background: radial-gradient( farthest-corner at 70% 50%, red, yellow, green); } </style> <body> <!-- 中心點與半徑放射漸層 --> <div class="radial1">circle</div> <div class="radial2">ellipse</div> <div class="radial3">closest-side</div> <div class="radial4">farthest-side</div> <div class="radial5">closest-corner</div> <div class="radial6">farthest-corner</div> </body> ``` >顯示如下: >![](https://i.imgur.com/1TCUt63.png) --- ### 設定框線：border * 框線樣式：border-style ==語法 border-style : 樣式== | 樣式 | | | :-------- | :-------- | | none | 不顯示框線 | | hidden | 不顯示框線 | | dotted | 虛線 | | dashed | 破折號線 | | solid | 實線 | | double | 雙線 | * 框線寬度：border-width * border-width : 數值/ 百分比/ thin / medium / thick * 框線顏色：border-color * border-color : 顏色值 ### border快速設定 ==語法border : 樣式 寬度 顏色== ![](https://i.imgur.com/cNdeoUG.png) ### 單邊框設定 :::info border-(top/right/bottom/left)-style : 屬性值 border-(top/right/bottom/left)-width : 屬性值 border-(top/right/bottom/left)-color : 屬性值 ::: 應用練習: ```htmlmixed= <div style="border-style: dotted solid dashed double;border-width: 5px 4px 3px 10px; border-color: brown red black blue;"> <p>Lorem</p> </div> ``` >顯示如下: ![](https://i.imgur.com/aeo4U6L.png) --- ### 表格框線重疊顯示 border-collapse : collapse / separate(預設值) ==語法 border-collapse : collapse== --- 範例: ```css= table { border-collapse: 2px solid #000000; } ``` --- ### 圓角框線 border-radius ==語法 border-radius : 圓角半徑== 範例: ```htmlmixed= <!-- 圓角半徑 --> <div style="border: solid 3px orange; border-radius: 10px;"> <p>四個邊的框線圓角都相同。</p> </div> <div style="border: solid 3px orange; border-radius: 20px 20px 0px 0px;"> <p>完整的框線有四個邊，若要單獨設定各圓角的角度，可以在border-radius中設定4 個值，其套用的順序為左上、右上、右下、左下。</p> </div> ``` --- ### 區塊陰影：box-shadow / 內部陰影：inset ==box-shadow : 水平距離 垂直距離 模糊度 延伸度 顏色== ```htmlmixed= <style> /*box shadow*/ span { width: 400px; padding: 50px; margin: 10px auto 40px; color: white; background-color: skyblue; } .box1 { box-shadow: 10px 10px 5px 5px gray; } .box2 { box-shadow: 20px 20px 10px 10px gray inset; } </style> <body> <!-- BOX Shabow --> <div></div> <span class="box1">BOX Shabow</span> <span class="box2">BOX Shabow</span> </body> ``` >顯示如下: >![](https://i.imgur.com/SpDgDbN.png)