【CSS】Color Name

REF: W3Schools

Color Name	HEX	Display
White	#FFFFFF
Ivory	#FFFFF0
LightYellow	#FFFFE0
Yellow	#FFFF00
Snow	#FFFAFA
FloralWhite	#FFFAF0
LemonChiffon	#FFFACD
Cornsilk	#FFF8DC
SeaShell	#FFF5EE
LavenderBlush	#FFF0F5
PapayaWhip	#FFEFD5
BlanchedAlmond	#FFEBCD
MistyRose	#FFE4E1
Bisque	#FFE4C4
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
PeachPuff	#FFDAB9
Gold	#FFD700
Pink	#FFC0CB
LightPink	#FFB6C1
Orange	#FFA500
LightSalmon	#FFA07A
DarkOrange	#FF8C00
Coral	#FF7F50
HotPink	#FF69B4
Tomato	#FF6347
OrangeRed	#FF4500
DeepPink	#FF1493
Fuchsia	#FF00FF
Magenta	#FF00FF
Red	#FF0000
OldLace	#FDF5E6
LightGoldenRodYellow	#FAFAD2
Linen	#FAF0E6
AntiqueWhite	#FAEBD7
Salmon	#FA8072
GhostWhite	#F8F8FF
MintCream	#F5FFFA
WhiteSmoke	#F5F5F5
Beige	#F5F5DC
Wheat	#F5DEB3
SandyBrown	#F4A460
Azure	#F0FFFF
HoneyDew	#F0FFF0
AliceBlue	#F0F8FF
Khaki	#F0E68C
LightCoral	#F08080
PaleGoldenRod	#EEE8AA
Violet	#EE82EE
DarkSalmon	#E9967A
Lavender	#E6E6FA
LightCyan	#E0FFFF
BurlyWood	#DEB887
Plum	#DDA0DD
Gainsboro	#DCDCDC
Crimson	#DC143C
PaleVioletRed	#DB7093
GoldenRod	#DAA520
Orchid	#DA70D6
Thistle	#D8BFD8
LightGray	#D3D3D3
LightGrey	#D3D3D3
Tan	#D2B48C
Chocolate	#D2691E
Peru	#CD853F
IndianRed	#CD5C5C
MediumVioletRed	#C71585
Silver	#C0C0C0
DarkKhaki	#BDB76B
RosyBrown	#BC8F8F
MediumOrchid	#BA55D3
DarkGoldenRod	#B8860B
FireBrick	#B22222
PowderBlue	#B0E0E6
LightSteelBlue	#B0C4DE
PaleTurquoise	#AFEEEE
GreenYellow	#ADFF2F
LightBlue	#ADD8E6
DarkGray	#A9A9A9
DarkGrey	#A9A9A9
Brown	#A52A2A
Sienna	#A0522D
YellowGreen	#9ACD32
DarkOrchid	#9932CC
PaleGreen	#98FB98
DarkViolet	#9400D3
MediumPurple	#9370DB
LightGreen	#90EE90
DarkSeaGreen	#8FBC8F
SaddleBrown	#8B4513
DarkMagenta	#8B008B
DarkRed	#8B0000
BlueViolet	#8A2BE2
LightSkyBlue	#87CEFA
SkyBlue	#87CEEB
Gray	#808080
Grey	#808080
Olive	#808000
Purple	#800080
Maroon	#800000
Aquamarine	#7FFFD4
Chartreuse	#7FFF00
LawnGreen	#7CFC00
MediumSlateBlue	#7B68EE
LightSlateGray	#778899
LightSlateGrey	#778899
SlateGray	#708090
SlateGrey	#708090
OliveDrab	#6B8E23
SlateBlue	#6A5ACD
DimGray	#696969
DimGrey	#696969
MediumAquaMarine	#66CDAA
RebeccaPurple	#663399
CornflowerBlue	#6495ED
CadetBlue	#5F9EA0
DarkOliveGreen	#556B2F
Indigo	#4B0082
MediumTurquoise	#48D1CC
DarkSlateBlue	#483D8B
SteelBlue	#4682B4
RoyalBlue	#4169E1
Turquoise	#40E0D0
MediumSeaGreen	#3CB371
LimeGreen	#32CD32
DarkSlateGray	#2F4F4F
DarkSlateGrey	#2F4F4F
SeaGreen	#2E8B57
ForestGreen	#228B22
LightSeaGreen	#20B2AA
DodgerBlue	#1E90FF
MidnightBlue	#191970
Aqua	#00FFFF
Cyan	#00FFFF
SpringGreen	#00FF7F
Lime	#00FF00
MediumSpringGreen	#00FA9A
DarkTurquoise	#00CED1
DeepSkyBlue	#00BFFF
DarkCyan	#008B8B
Teal	#008080
Green	#008000
DarkGreen	#006400
Blue	#0000FF
MediumBlue	#0000CD
DarkBlue	#00008B
Navy	#000080
Black	#000000

【CSS】outline

説明

outline位在border外面

.box

.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 outline: 1px solid red

Display

FireFox的outline bug

如果裡面的東西超出box的話，outline也會被撐開
※其他瀏覽器不會有這個問題

.box
 .inner

.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 outline: 1px solid red

.inner
 background-color: moccasin
 height: 300px
 width: 100px

Display

解決方法

改用box-shadow做出outline的效果

.box
 .inner

.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 // outline: 1px solid red
 box-shadow: 0 0 0 1px red
 
.inner
 background-color: moccasin
 height: 300px
 width: 100px

Display

【CSS】漸層色塊

漸層原理説明

撰寫漸層時，要指定多組參數。每一組參數要有〖顏色〗與〖%數〗

.box

.box
 width: 500px
 height: 200px
 //left: 指定〖從左〗開始漸層 
 background: linear-gradient(left, DarkGreen 20%, MediumSeaGreen 70%)

▼示意圖

第1組參數：〖起始色〗深綠色、〖%數〗20%
0%～20% →深綠色純色區
第2組參數：〖終色〗淺綠色、〖%數〗70%
20%～70%→漸層區域
70%～100%→淺綠色純色區

色塊

漸層區的定義是「第1個%」與「第2個%」之間的區塊，
所以如果「第2個%」指定跟「第1個%」一樣的數字，就無法產生漸層區，會形成色塊。

線性漸層色塊

.lg-box

.lg-box
 width: 300px
 height: 100px
 border: 1px solid #000
 background: linear-gradient(Left, Teal 50%, transparent 50%)

Display

圓形漸層色塊

圓形漸層如果參數指定的剛剛好一樣，會有顏色轉換處會有鋸齒產生，所以需要預留數%的漸層空間。

.rd-box

.rd-box
 width: 200px
 height: 200px
 border-radius: 100%
 border: 1px solid #000
 background: radial-gradient(Teal 49.5%, transparent 50%)//預留0.5%的漸層空間

Display

【CSS】radio style

説明

自由撰寫radio input的樣式，但是保有 checked 的功能

【架構】

<label>裡面要有 2 個東西：<input type=”radio”>、<div class=”radio-widget”>
※這樣點到label裡面任何一處，<input type=”radio”>都會被觸發
radio-widget是假的radio，在〔.radio-widget〕做出勾選前的樣式
在〔input[type=”radio”]:checked+.radio-widget〕撰寫勾選後的樣式

參考：input label 應用、漸層色塊
衍生：checkbox style

範例

label.radio-label
 input(type="radio" name="rd" id="rd1" value="1" checked)
 .radio-widget
 | option 1

label.radio-label
 input(type="radio" name="rd" id="rd2" value="2" checked)
 .radio-widget
 | option 2

label.radio-label
 input(type="radio" name="rd" id="rd3" value="3" checked)
 .radio-widget
 | option 3

.radio-label
 margin: 0px 5px

 //原本的radio設不顯示
 input[type="radio"]
  display: none
 
 //這邊寫選取後的效果
 input[type="radio"]:checked+.radio-widget
  border-color: #50BBB6
  background: radial-gradient(#50BBB6 44%, transparent 50%)
  
.radio-widget
 width: 20px
 height: 20px
 border: 1px solid #eee
 border-radius: 100%
 position: relative
 margin-right: 5px
 background: radial-gradient(#eee 20%, #fff 25%)
 

.radio-widget, input
 display: inline-block
 vertical-align: top

【CSS】checkbox style

説明

自由撰寫checkbox的樣式，但是保有 checked 的功能

【架構】

<label>裡面要有 2 個東西：<input type=”checkbox”>、<div class=”checkbox-widget”>
※這樣點到label裡面任何一處，<input type=”checkbox”>都會被觸發
checkbox-widget是假的checkbox，在〔.checkbox-widget〕做出勾選前的樣式
在〔input[type=”checkbox”]:checked+.checkbox-widget〕撰寫勾選後的樣式

參考：input label 應用
衍生：radio style

範例

label.checkbox-label
 input(type="checkbox" value="1")
 .checkbox-widget
 | checkbox 1

label.checkbox-label
 input(type="checkbox" value="1")
 .checkbox-widget
 | checkbox 2

label.checkbox-label
 input(type="checkbox" value="1")
 .checkbox-widget
 | checkbox 3

.checkbox-label
 .checkbox-widget, input
  display: inline-block
  vertical-align: top
 
 
 //在這裡刻出自訂樣式的checkbox
 .checkbox-widget 
  width: 20px
  height: 20px
  margin-right: 5px
  background-color: #fff
  border: 1px solid #eee
  border-radius: 4px
  text-align: center
  &:after
   content: "✔︎"
   color: #fff
 
 //原本的checkbox設不顯示
 input[type="checkbox"]
  display: none

 //選取後的樣式
 input[type="checkbox"]:checked+.checkbox-widget          
  background-color: #50BBB6 
  border-color: #50BBB6

【CSS】smooth

説明

滑順滾動的屬性，讓網頁內引導<href=”#id”>的動作可以滑順地跳下來

瀏覽器支援度→Can I Use …

範例

方法一：指定CSS

a(href="#title")
 button click me

//這邊填充很多個br
h1#title title

*
 scroll-behavior: smooth

Display

方法二：指定JavaScript

button(onclick="scrollIt()") click me

function scrollIt(){
 
 window.scroll({
  top: 0,
  left: 0,
  behavior: "smooth"
 });

 
}

Display

【CSS】border-collapse 表格消除空隙

情況

table 預設的 style 方格與方格之間會有空隙
（在table, td, th都有設定border的情況下會很明顯）

解決：border-collapse

table
 tr
  th Items
  th Price
 tr
  td Apple
  td $10
 tr
  td Orange
  td $15

table, td, th 
 border: 1px solid black
 
table
 border-collapse: collapse

Display

沒有加border-collapse的情況

Items	Price
Apple	$10
Orange	$15

有使用border-collapse的情況

Items	Price
Apple	$10
Orange	$15

【CSS】height transition

説明

CSS展開動畫：點選收起來的選單→觸發動作開啓選單

開啓狀態下的選單區塊，高度寫inherit的話，無法完成動態效果，所以要用max-height的方式完成

.outer 收合的選單 (hover me)
 .inner
  p 選單内部
  p 選單内部
  p 選單内部

.outer
  background-color: #E7F2F1
  display: inline-block
  padding: 10px
  &:hover
   .inner
   max-height: 150px
   //不用精準設定到元素高度，元素只會展開到他自己的高度。數字可以抓大一點，數字越大展開的速率越快。
 
.inner
 background-color: #439E96
 padding: 0px 10px
 margin: 5px
 max-height: 0
 overflow: hidden
 transition-duration: 0.5s

Display

收合的選單 (hover me)

選單内部

【CSS】z-index

條件

內元素絕對定位（所有）
外元素相對定位
目標元素指定index

※z-index的數值代表優先度。
數字大，表示優先顯示的強度越強（排在前面）
數字小，表示優先顯示的強度越低（隱藏在後面）←反向操作：設負數讓元素被蓋住

範例

沒有設index的情況下，HTML下面的元素會蓋掉上面的元素

.box1
.box2

body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

綠色方塊的HTML在上面，藍色方塊的HTML在下面。
所以藍色方塊優先顯示，蓋掉綠色方塊

設定z-index，優先顯示目標元素

.box1
.box2

body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 z-index: 1
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

設定index為1，優先顯示綠色方塊

【CSS】text-indent

説明

首行縮排使用，單位是em

範例

p.p text-indent可以令文章的首行縮排
p 這是沒有縮排的p

.p
 text-indent: 2em

Display

text-indent可以令文章的首行縮排

這是沒有縮排的p

【CSS】Width fix the list text

問題背景

<li>在不指定寬度的情況下，會自動填滿整行。
如果把border叫出來，就會很明顯。
例如：

填滿整行的li
填滿整行的li

可以佐以排版技巧來解決這個問題。

橫向排列：inblock

橫向排列只要指定display就可以解決問題

ul
 li 橫向排列不填滿
 li 橫向排列不填滿
 li 橫向排列不填滿

li
 border: 1px solid #000
 display: inline

Display

橫向排列不填滿
橫向排列不填滿
橫向排列不填滿

縱向排列：float

使用float完成縱向排列

ul
 li 縱向排列不填滿
 li 縱向排列不填滿
 li 縱向排列不填滿

ul
 float: left

li
 border: 1px solid #000

Display

縱向排列不填滿
縱向排列不填滿
縱向排列不填滿

注意：周邊元素必須指定clear

如果不指定clear的話，會變成這樣↓↓

縱向排列不填滿
縱向排列不填滿
縱向排列不填滿

這段文字想要放在清單下方，但是跑到左邊來了QQ

解決法：周邊的元素指定clear。

ul 
 li 縱向排列不填滿 
 li 縱向排列不填滿 
 li 縱向排列不填滿 

p 這段文字想要放在清單下方，成功。

ul
 float: left
li
 border: 1px solid #000

p 
 clear: both 
 //該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西，若有的話，該元素會自動往下移。

Display

縱向排列不填滿
縱向排列不填滿
縱向排列不填滿

這段文字想要放在清單下方，成功

游標

説明

用 CSS 刻出游標樣式
抓取滑鼠位置
游標的位置隨著滑鼠移動而改變

範例

#cross

#cross
 position: absolute
 &:before,&:after
 content: ""
 display: block
 width: 60px
 height: 15px
 background-color: #fff
 position: absolute
 left: 50%
 top: 50%
 transform: translate(-50%,-50%) rotate(45deg)
 &:after
 transform: translate(-50%,-50%) rotate(-45deg)

window.addEventListener("mousemove", function(evt){
 
 var x=evt.pageX;
 var y=evt.pageY;
 
 cross.style.left=x+"px";
 cross.style.top=y+"px";
})

Display

CODEPEN

CSS not selector

指定不要選到某`class`的元素

語法：:not(.your-class)

h1.h1 h111
h1.h2 h222
h1.h3 h333

h1:not(.h1)
 color: red

指定不要選到某`attribute`的元素

抓取attribute名稱的範例

h1.h1(data-h1) h111
h1.h2(data-h2) h222
h1.h3(data-h3) h333

h1:not([data-h1])
 color: red

抓取attribute名稱+內容的範例

h1.h1(data-heading="h1") h111
h1.h2(data-heading="h2") h222
h1.h3(data-heading="h3") h333

h1:not([data-heading="h1"])
 color: red

多重條件

h1.h1 h111
h1.h2 h222
h1.h3 h333

h1
 color: red
 
h1:not(.h2):not(.h3)
 color: black

圖層混合模式 mix-blend-mode

mix-blend-mode是一個CSS屬性，可以對圖層混合做出一些調整（類似Photoshop），IE不能用
本篇介紹2個簡單的去背效果

本次使用的範例圖

這張圖沒有去背，如果放到有色背景上會變這樣

色彩增值模式 `multiply`

背景色與目標圖片相乘後，成為新的顏色代換掉圖片自己的顏色

背景色×目標圖片的黑色部分＝黑色（原地不動的意思）
背景色×目標圖片的白色部分＝背景色

.image-outer
 img(src="https://raw.githubusercontent.com/ianchen0419/notes/master/img/圖層混合模式%20mix-blend-mode/01.png")

.image-outer
 background: orange
 display: inline-block
 padding: 40px
 img
  mix-blend-mode: multiply

原本白色的部分會被背景的橘色吃掉，做了簡單的去背處理
（但只適用在在圖片只有黑白兩色的情況而已！）

濾色模式 `screen`

背景色與目標圖片的補值相乘後，成為新的顏色代換掉圖片自己的顏色
上面的multiply會做去背，這次的screen則會做去黑

背景色×目標圖片的黑色部分＝背景色
背景色×目標圖片的白色部分＝白色（原地不動的意思）

.image-outer
 background: orange
 display: inline-block
 padding: 40px
 img
  mix-blend-mode: screen

這次換層黑色的部分被背景的橘色吃掉，達成了去黑效果
（一樣只適用在在圖片只有黑白兩色的情況而已！）

視差滾動

視差滾動，讓圖片不會隨著卷軸上下移動，有強調的效果

br*10
.my-image
br*30

上下各放10個與30個<br>，創造出足以產生拉霸的網頁

.my-image
 width: 600px
 height: 400px
 background: url(https://picsum.photos/600/400)
 background-attachment: fixed
 background-size: cover
 margin: 0 auto

原生CSS變數 root

原生的CSS變數，方便又好用，但是IE不能用

:root {
 --green: #11c1a4;
}

變數的宣告使用:root選擇器，位置在<html>這裏

h1 {
 color: var(--green);
}

使用變數時要用var()括弧包起來

SASS 調整顏色深淺

SASS內建的顏色調整參數lighten/darken可以快速調整顏色的明度/暗度

darken(色碼/色名, 調整%數)

範例

h1 這是一段文字
h1.darken 暗沈的文字
h1.lighten 明亮的文字

h1
 color: dodgerblue
 
h1.darken
 color: darken(dodgerblue, 25%)
 
h1.lighten
 color: lighten(dodgerblue, 25%)

會動的圓形進度條

本範例使用SVG處理圖形，並搭配使用stroke-dasharray與stroke-dashoffset讓圖形能夠動態增長
注意本範例僅能適用在stroke類圖形，如果UI設計師把圖形轉成path的話，它就不適用了

`stroke-dasharray`屬性介紹

stroke-dasharray描述實線與虛線的配置，用法如下

stroke-dasharray: 實線值 虛線值

實線值與虛線值的單位不是px也不是pt
他的單位會跟viewbox的設定一起跑

svg(viewbox="-50 -50 100 100")
 line(x1=-50 y1=0 x2=50 y2=0)

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke: #000
  stroke-dasharray: 10 20

本例viewbox的設定值為-50 -50 100 100，即表示x軸起點值為-50，且長度為100，因此x軸的終點值為50

在stroke-dasharray: 10 20的指定下，設定實線（黑線）為10，虛線為20
所以整個線段的虛實分佈為

`-50`到`-40`	實線段
`-40`到`-20`	虛線段
`-20`到`-10`	實線段
`-10`到`10`	虛線段
`10`到`20`	實線段
`20`到`40`	實線段
`40`到`50`	實線段

上述範例中viewbox的長度設定為100，所以整個實線/虛線可以用的總額就是100
寫成stroke-dasharray: 0 100的話，線就會不見（全都是虛線）
寫成stroke-dasharray: 100 0的話，就會看到一條全黑的實線（全都是實線）

補充：`stroke-dasharray`的多層次指定

stroke-dasharray可以指定多個值，一樣都是奇數值放實線長度，偶數值放虛線的長度描述
只要viewbox的長度不夠他走完，它就會回到最前面輪迴
前例的輪迴是2 base會比較單純，多層次指定的輪迴的虛實設定就會更複雜
（本章動態圓形進度條只需要用到2個值就可以了）

svg(viewbox="-50 -50 100 100")
 line(x1=-50 y1=0 x2=50 y2=0)

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke: #000
  stroke-dasharray: 10 15 20 25

位置	虛線段/實線段	`stroke-dasharray`線段輪迴
`-50`到`-40`	實線段	`10`
`-40`到`-25`	虛線段	`15`
`-25`到`-5`	實線段	`20`
`-5`到`20`	虛線段	`25`
`20`到`30`	實線段	`10`
`30`到`45`	虛線段	`15`
`45`到`50`	實線段	`20` 這裡沒走完所以被卡掉只剩短短一段而已

`stroke-dashoffset`屬性介紹

stroke-dashoffset提供開始位置偏移的效果
其實就是更動x1的數值，如果是stroke-dashoffset: 10的話x1的數值就會比原本的還要在-10

舉例來說

svg(viewbox="-50 -50 100 100")
 line(x1=-50 y1=0 x2=50 y2=0)

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke: #000
  stroke-dasharray: 100 100
  stroke-dashoffset: 10

這個範例中可以看到線段整個往左邊偏移了10，但是他其實也就是等於這個意思

svg(viewbox="-50 -50 100 100")
 line(x1=-60 y1=0 x2=50 y2=0)

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 line
  stroke: #000
  stroke-dasharray: 100 100
  // stroke-dashoffset: 10

圓形的`stroke`：百分比進度條

理解上述stoke-dasharray、stroke-dashoffset原理之後，我們來看看圓形的版本要怎麼做

首先，普通的畫一個圓

svg(viewbox="-50 -50 100 100")
 circle(cx=0 cy=0 r=40)

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 circle
  fill: none
  stroke: teal

接著，再用stroke-dasharray讓這個圓具有進度條的感覺（嘗試畫75%的圓）

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 circle
  fill: none
  stroke: teal
  stroke-dasharray: 188.4 62.8

圓周長的算法為

半徑(r)×2×3.14

上述範例的半徑r為40，所以總圓周長為40×2×3.14＝251.2
再往下規劃實線/虛線的分配，實線線段要配給75%，虛線線段要配給25%，所以

實線長度：251.2×75%=188.4
虛線長度：251.2×25%=62.8

雖然成功畫出了75%的實線段與25%的虛線段，但是…位置看起來不像一個進度條
這是因為，<circle>的起始點是位於90deg的位置，也就是圓形的右方
然後再順時鐘往前畫出去

順時鐘這個方向是對的，但是90deg這個起點不理想
所以要再透過stroke-dashoffset偏移起始點，讓起始點變成0deg

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 circle
  fill: none
  stroke: teal
  stroke-dasharray: 188.4 62.8
  stroke-dashoffset: 62.8

stroke-dashoffset的值也是以圓周長來算，由於要偏移1/4的圓周長的距離，所以給定總長度251.2的25%，也就是62.8的偏移量

這樣就是我們所熟悉的圓形進度條了！

接下來來透過stroke-dasharray的animation實作動態
動態的技巧是：讓實線的值從0到188.4，視覺上就能做出圓形長出來的效果了

svg(viewbox="-50 -50 100 100")
 circle(cx=0 cy=0 r=40)
 text(x=0 y=0) 75%

svg
 width: 300px
 height: 300px
 border: 1px solid #000
 circle
  fill: none
  stroke: teal
  stroke-dashoffset: 62.8
  animation: mycircle 3s infinite
 text
  fill: teal
  dominant-baseline: middle
  text-anchor: middle
  
 @keyframes mycircle
  0%
   stroke-dasharray: 0 251.2
  100%
   stroke-dasharray: 188.4 62.8

筆記線效果

利用漸層中的色塊特性，並加上background-size讓他能不斷重複
就能讓背景能夠有類似筆記橫線的效果

div
 |line1
 br
 |line2
 br
 |line3
 br
 |line4

div
 width: 500px
 border: 1px solid #888
 height: 500px
 background: linear-gradient(rgba(238, 238, 238, 0.35) 95%, rgba(43, 139, 165, 0.15) 5%)
 background-size: 100% 22px
 padding: 0 5px

寫RWD的方法

RWD寬度範例

max-width的指定值為包含。
該當寬度與該當寬度以下的裝置，都會套用到RWD的CSS內容

@media (max-width: 768px)
 body
  background: pink

寬度767px：粉紅色背景（手機版）
寬度768px：粉紅色背景（手機版）
寬度769px：白色背景（電腦版）

圖片RWD

圖片也能透過<picture>與 <source>做到當大螢幕時讀A圖，小螢幕時讀B圖的效果

picture
 source(media="(max-width: 480px)" srcset="手機版的圖.png")
 img(src="電腦版的圖.png" width="100%")

不論在電腦版，或是手機版，畫面都會顯示出<img>，並且一樣繼承width="100%"的參數
只是，當他變成手機版時（依照上例的設定，當寬度等於或小於480px時），<img>的src會作切換，切換成source所定義的「手機版的圖.png」的位置

Again，因為max-width具備了包含的含義，所以顯示情形如下（以上例為例）

寬度479px：手機版的圖.png
寬度480px：手機版的圖.png
寬度481px：電腦版的圖.png

JavaScript與螢幕寬度

在JavaScript實作螢幕寬度的功能，我們需要使用到innerWidth這個方法。

需要注意的一點是，假如今天這份網站的break point統一設定為768px好了。
在767px、768px時切換為手機版，但在769px時切換成電腦版。

由於media max-width的包含的特性，參數會下成

@media (max-width: 768px)
 body
  background: pink

picture
 source(media="(max-width: 768px)" srcset="手機版的圖.png")
 img(src="電腦版的圖.png" width="100%")

但在JavaScript，如果我們也想要使用768px這個參數，if statement需要寫成「小於等於」，也就是「<=」

if(innerWidth<=768){
　　document.body.style.backgroundColor='pink';
}

如此一來，才能與CSS沿用同一個參數，並同樣達成以下效果

寬度767px：粉紅色背景（手機版）
寬度768px：粉紅色背景（手機版）
寬度769px：白色背景（電腦版）

當然，如果搞剛的話，也可以加上resize事件，讓畫面一動到尺寸就重新渲染JavaScript。
但基於使用者（基本上）不會亂切尺寸，所以本例就沒有加工了。

Media Query的三種寫法

⑴ 直接寫在CSS內

最常見的方法就是直接寫在CSS內，但這樣做CSS的易讀性會很差

@media (max-width: 768px)
 body
  background: pink

⑵ `<link>`外連

<link>也能指定Media Query，讓只符合某些Media條件下時，才能連到某特定CSS檔案

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mobile.css" />

body
 background: pink

⑶ `import`引入

import法適用於複雜的Media寬度指定，比方說寫了好幾個版本的RWD：iPad直版、iPhone SE版、iPhone X版、iPad橫板…
Media條件太多時，全部寫進CSS會很亂，都寫到<link>裡面也會落落長
所以最好就是寫進一隻index.css裡面進行指定

`style.css`	一般的樣式
`index.css`	索引CSS（只用來寫`import`）
`mobile.css`	手機版樣式

STEP① HTML

寫import的時候，<link>指派的順序相當重要
必須要把index.css放到最末位

<link rel="stylesheet prefetch" href="style.css" />
<link rel="stylesheet prefetch" href="index.css" />

STEP② 索引CSS

index.css只能用來寫各種import，沒辦法寫一般的CSS樣式
如果寫的CSS樣式的話，import的效力就會消失

@import url(mobile.css) screen and (max-width: 768px);

STEP③ 手機版CSS

body {
 background: pink;
}

inline-block排滿後會產生的空隙

發生狀況

使用inline-block排版時，給定的元素寬度加總等於100%時會掉下來。

.item1 item1
.item2 item2

div
 border: 1px solid #000
 display: inline-block
 height: 200px
 
.item1
 width: 30%
 
.item2
 width: 70%

上述範例中，本來預期元素排成一行
但item2被擠下來了，所以變成兩行了

這是因為，由於各種原因，item1跟item2之間有空隙，所以寬度下得太滿時，他們會無法排成一行

針對這個問題，有兩個做法可以讓他們排成一行

方法⑴ 偷改寬度法（爛方法）

只要偷偷地將item2的寬度減個1%（或2%）他就能排上去了

div
 border: 1px solid #000
 display: inline-block
 height: 200px
 
.item1
 width: 30%
 
.item2
 width: 68%

方法⑵ 消除間隙法（認真法）

認真地從各個方面消除排版產生的間隙，讓他們真實地能夠排成一行

間隙處① html產生的文字空白

HTML架構中有一種元素叫做textNode
這個textNode不是畫面上看得到的元素
他是開發人員在寫html時，為了程式碼排版美觀，所以在文件上產生的
「既沒有被tag包覆，也沒有內容的空白」

如上圖，雖然看似是一份普通的HTML文件
但橘色虛線框部分跟綠色虛線框部分因為的確存在著排版上的空隙
所以上圖範例會產生2個textNode
（和一個elementNode：<h1>）

消除textNode造成的空白間隙影響，有兩個方法。
方法之一是排版時給他連在一起

這樣子，就能夠物理上消除textNode產生的影響了。
（或是使用pug等前處理器，也能在編譯時自動幫忙把textNode給移走）

另外一個方法是使用font-size: 0（比較常用，因為前一個方法太難讀程式碼了）
這時，即便存在著textNode，但因為顯示的空間都被設定成0了，所以畫面上就真正沒有了

body
 h1 嗨你好，我是標題

body
 font-size: 0

h1
 font-size: 14px

回到一開始的兩個item的範例，這時程式碼會變成

.item1 item1
.item2 item2

div
 border: 1px solid #000
 display: inline-block
 height: 200px
 font-size: 14px
 
.item1
 width: 30%
 
.item2
 width: 70%
 
body
 font-size: 0

把textNode的影響移除了，但空間還是不夠，item仍舊掉下來了

間隙處② `border`（或是`padding`等人）導致的外溢

在預設的box-sizing: content-box之下border、padding這些空間都會往外長
因為本例用了border: 1px solid，這左框+右框×2個item，合計4px的空間就導致了空間不足，所以item2就掉下來了
參考舊文

這時，需要使用box-sizing: border-box，將border等人的空間設定為往內長

div
 border: 1px solid #000
 display: inline-block
 height: 200px
 font-size: 14px
 box-sizing: border-box
 
.item1
 width: 30%
 
.item2
 width: 70%
 
body
 font-size: 0

對話框效果

做法剖析

用background-color做普通的方框+用複雜的border做三角形
舊文連結：用CSS做出三角形

h1 這是一段標題

h1
 background: teal
 color: #fff
 padding: 10px 20px
 position: relative
 &:after
  content: ''
  border-right: 15px solid transparent
  border-left: 15px solid transparent
  border-top: 25px solid teal
  position: absolute
  bottom: -25px
  left: 30px

螢光筆效果

原理說明

利用linear-gradient中的色塊效果，做出彷彿畫了螢光筆似的醒目提示效果
舊文連結：CSS漸層

span 這是一段文字，我想要強調
span.mark-pen 這個關鍵字
span ，強調的效果類似畫上螢光筆

.mark-pen
 background-image: linear-gradient(transparent 50%, rgba(173, 234, 234, 0.5) 50%)

同場加映：HTML `<mark>`

<mark>也有很類似的效果，但沒法像linear-gradient做出透明區域，會比較不像螢光筆一些。

span 這是一段文字，我想要強調
mark 這個關鍵字
span ，強調的效果類似畫上螢光筆

背景移動效果

設定漸層背景
background-size高度放大
設定CSS動畫，移動background-position

body
 width: 100vw
 height: 100vh
 background: linear-gradient(20deg, skyblue, SeaGreen 70%)
 background-size: 100% 300%
 animation: moving 8s infinite both
 
@keyframes moving
 0%
  background-position: 100% 30%
 100%
  background-position: 100% 100%

漸層

線性漸層

background: linear-gradient(角度, 開始色, 結束色)

角度說明

`to left`	`270deg`	由右往左
`to right`	`90deg`	由左往右
`to top`	`0 deg`	由下往上（default）
`to bottom`	`90 deg`	由上往下

.box

.box
 width: 500px
 height: 300px
 background: linear-gradient(to bottom, skyblue, aliceblue)

顏色的百分比係數

百分比係數，指的是圖的位置。
假設一張漸層圖的角度是to bottom時，40%指的是由上到下40%的位置

如上，若看到一個範例寫為

background: linear-gradient(to bottom, skyblue 40%, aliceblue 70%)

則他代表的是

圖0% - 40%為skyblue色
圖70% - 100%為aliceblue色
圖40% - 70%則為sky跟alice的混色

色塊

當前色百分比係數等同於後色百分比係數時，兩色的間隔空間為0，沒有漸層的空間，就會呈現色塊樣式

.box
 width: 500px
 height: 300px
 background: linear-gradient(to bottom, skyblue 60%, aliceblue 60%)

圓形漸層

.box
 width: 500px
 height: 300px
 background: radial-gradient(skyblue, aliceblue)

進階：用圓形漸層做radio button

label
 input(type="radio" name="rd1")
 .widget
 span 選項一

label
 input(type="radio" name="rd1")
 .widget
 span 選項二

label
 input(type="radio" name="rd1")
 .widget
 span 選項三

input
 display: none
 
label
 margin-right: 30px
 display: inline-flex
 align-items: center
 cursor: pointer
 
.widget
 margin-right: 8px
 width: 20px
 height: 20px
 border: 1px solid #cecece
 display: inline-block
 vertical-align: middle
 border-radius: 100%
 background: radial-gradient(#cecece 20%, #fff 25%)
 cursor: pointer

input:checked+.widget
 background: radial-gradient(cadetblue 45%, #fff 50%)
 border-color: cadetblue
 
input:checked~span
 color: cadetblue

用CSS做出三角形

原理剖析

做一個width為0、height為0，border為40的元素

div

div
 width: 0
 height: 0
 border: 40px solid #000

4個border都給予不同顏色，發現邊框與邊框之間呈現45度角

div
 width: 0
 height: 0
 border-top: 40px solid aliceblue
 border-bottom: 40px solid cadetblue
 border-left: 40px solid lightblue
 border-right: 40px solid skyblue

移除border-top，並將border-bottom的寬度改成2倍大

div
 width: 0
 height: 0
 border-bottom: 80px solid cadetblue
 border-left: 40px solid lightblue
 border-right: 40px solid skyblue

將border-right、border-left的顏色都設為transparent

div
 width: 0
 height: 0
 border-bottom: 80px solid cadetblue
 border-left: 40px solid transparent
 border-right: 40px solid transparent

快速複製區

div
 width: 0
 height: 0
 border-bottom: 80px solid cadetblue
 border-left: 40px solid transparent
 border-right: 40px solid transparent

div
 width: 0
 height: 0
 border-top: 80px solid cadetblue
 border-left: 40px solid transparent
 border-right: 40px solid transparent

div
 width: 0
 height: 0
 border-left: 80px solid cadetblue
 border-top: 40px solid transparent
 border-bottom: 40px solid transparent

div
 width: 0
 height: 0
 border-right: 80px solid cadetblue
 border-top: 40px solid transparent
 border-bottom: 40px solid transparent

transform-origin

transform-origin: X軸瞄點 Y軸瞄點

X軸瞄點，可填入

center (=50%)
left (=0)
right (=100%)
○○px
○○%

Y軸瞄點，可填入

center (=50%)
top (=0)
bottom (=100%)
○○px
○○%

瞄點位置示範網站

https://ianchen0419.github.io/transformOrigin/

CSS animation

指定keyframes，定義動畫動作
設定animation，定義動畫秒速、次數

.outer
 .block 上下移動

.outer
 width: 300px
 height: 200px
 border: 1px solid #000
 text-align: center
 position: relative
 display: flex
 justify-content: center
 
.block
 width: 50px
 height: 50px
 border: 1px solid #000
 position: absolute
 bottom: 0
 animation: UpAndDown 2s infinite
 
@keyframes UpAndDown
 0%
  bottom: 0
 50%
  bottom: 100px
 100%
  bottom: 0

動畫速度曲線

animation-timing-function: linear

貝茲曲線換算

CSS偽元素

使用說明

透過:after或是:before指定偽元素
指定偽元素後，需要設定content屬性才能顯示出來
※偽元素不能被JS抓取到
※<img>、<br>等沒有close tag的元素，不能指定偽元素

content指定固定文字

固定文字用引號包覆

content: '固定文字'

div

div
 width: 300px
 height: 200px
 border: 1px solid #000

div:before
 content: '固定文字'

content指定HTML Attribute

偽元素內容會隨attribute的值而變動

content: attr(○○)

.tag1(food="高麗菜" price="100")
.tag2(food="大蒜" price="20")
.tag3(food="玉米" price="300")

div
 width: 300px
 height: 200px
 border: 1px solid #000

div:before
 content: '品項：' attr(food) ' | 價錢：$' attr(price)

文字光暈

text-shadow

text-shadow: 水平陰影 垂直陰影 擴散程度 顏色

.outer
 h1 微弱光暈

.outer
 width: 400px
 height: 200px
 background: #24260f
 line-height: 200px

h1
 color: #fff
 text-shadow: 0px 0px 15px #ffdd65
 text-align: center

text-shadow 重複疊加

藉由參數的重複疊加，增強光暈效果

.outer
 h1 刺眼光暈

.outer
 width: 400px
 height: 200px
 background: #24260f
 line-height: 200px

h1
 color: #fff
 text-shadow: 0px 0px 15px #ffdd65, 0px 0px 5px #fff
 text-align: center

置中的4種方法

絕對定位法

父層設定position: relative
子層設定position: absolute; top: 50%; left:50%;
由於上述設定不會計算到子層自己的寬與高，產生了偏移
因此，再另外設定transform: translate(-50%, -50%)補正子層寬高偏移

.outer
 .inner

.outer
 width: 300px
 height: 200px
 border: 1px solid
 position: relative
 
.inner
 width: 80px
 height: 80px
 background-color: skyblue
 position: absolute
 top: 50%
 left: 50%
 transform: translate(-50%, -50%)

flexbox法

父層設定display: flex
水平置中：justify-content: center
垂直置中：align-items: center
※以上忽略flex-direction等因素

.outer
 width: 300px
 height: 200px
 border: 1px solid
 display: flex
 justify-content: center
 align-items: center
 
.inner
 width: 80px
 height: 80px
 background-color: skyblue

text-align與line-height

水平置中：text-align: center
當父層高度為○○px、子層高度為△△px時
垂直置中：line-height: ○○-(△△/2)px
※此法適用於：子層沒有2行以上的文字內容

.outer
 width: 300px
 height: 200px
 border: 1px solid
 text-align: center
 line-height: 260px
 
.inner
 width: 80px
 height: 80px
 background-color: skyblue
 display: inline-block

table-cell法

父層設定display: table-cell
水平置中：text-align: center
垂直置中：vertical-align: middle

.outer
 width: 300px
 height: 200px
 border: 1px solid
 display: table-cell
 vertical-align: middle
 text-align: center
 
.inner
 width: 80px
 height: 80px
 background-color: skyblue
 display: inline-block

不用svg畫圓弧的方法

25%、30%、75%圓弧

.outer
 .sq1
 .sq2
 .inner
  .num 75%

.outer
 width: 150px
 height: 150px
 background: #c1d7ae
 border-radius: 100%
 position: relative
 overflow: hidden

.sq1
 width: 150px
 height: 150px
 position: absolute
 left: 75px
 background-color: #90a955
 
.sq2
 width: 75px
 height: 75px
 position: absolute
 top: 75px
 background-color: #90a955

.inner
 width: 140px
 height: 140px
 border-radius: 100%
 position: absolute
 top: 5px
 left: 5px
 background-color: white

.num
 text-align: center
 line-height: 140px
 font-size: 40px
 font-weight: 300
 color: #6A7152
 display: block

上述以外的圓弧（需使用傾斜矩形）

.outer
 .sq1
 .sq2
 .sq3
 .inner
  .num 90%

.outer
 width: 150px
 height: 150px
 background: #c1d7ae
 border-radius: 100%
 position: relative
 overflow: hidden

.sq1
 width: 150px
 height: 150px
 position: absolute
 left: 75px
 background-color: #90a955
 
.sq2
 width: 75px
 height: 75px
 position: absolute
 top: 75px
 background-color: #90a955

.sq3
 width: 75px
 height: 75px
 position: absolute
 top: 0
 background-color: #90a955
 transform: skewX(-36deg)
 transform-origin: bottom

.inner
 width: 140px
 height: 140px
 border-radius: 100%
 position: absolute
 top: 5px
 left: 5px
 background-color: white

.num
 text-align: center
 line-height: 140px
 font-size: 40px
 font-weight: 300
 color: #6A7152
 display: block

傾斜角度分析

transform: skewX(-36deg)
transform-origin: bottom

skewX角度的算法：

完全傾斜至水平為skewX(-90deg)，此時圓弧為75%的狀態
完全不傾斜為skewX(0deg)，此時圓弧為100%

-90deg:0deg = 75%:100%
-3.6deg = 1%

換算出1%等於-3.6deg

100%圓弧	`skew(0deg)`
99%圓弧	`skew(-3.6deg)`
98%圓弧	`skew(-7.2deg)`
97%圓弧	`skew(-10.8deg)`
96%圓弧	`skew(-14.4deg)`

如上表，換算出本範例的90%圓弧為skew(-36deg)

會動的圓弧

本範例使用的方法不能讓圓弧動起來，必須改用SVG stroke的方式才能讓他會動
詳細請參考這篇

box-sizing

box-sizing: content-box

預設屬性。
框線本身的高度不包含在元素高度內。

假如一個div的高度為100px，上框線為2px，下框線為2px
此div的總高度為100+2+2=104px

※因此，容易因為少計算了框線高度導致內元素過大而撐壞版面

div content-box

div
 height: 100px
 width: 300px
 border: 2px solid #000
 text-align: center

var mydiv=document.querySelector('div');
console.log(mydiv.offsetHeight); //104

【補充】這題抓高度不能用clientHeight，因為clientHeight不包含border高度，所以必須使用offsetHeight才能抓到包含border的高度

box-sizing: border-box

框線本身的高度內加於元素高度之中

假如一個div的高度為100px，上框線為2px，下框線為2px
此div的總高度仍會維持100px，div內容高度變為96px
div高度會受到擠壓（-4px）

div
 height: 100px
 width: 300px
 border: 2px solid #000
 text-align: center
 box-sizing: border-box

var mydiv=document.querySelector('div');
console.log(mydiv.offsetHeight); //100

box-shadow

參數設定

box-shadow: X偏移px Y偏移px 模糊的程度px 外擴或内縮px 指定顏色rgba

範例

div 這是陰影框

div
 width: 350px
 height: 200px
 background-color: #243010
 color: white
 text-align: center
 line-height: 200px
 box-shadow: 10px 10px 20px -5px rgba(0,51,0,0.5)

CSS Display屬性

display: block

<div>, <h1>的預設屬性
元素寬度預設填滿寬度，並且會往下掉
排版css支援情況
- height：支援
- width：支援
- margin：支援
- padding：支援

div block
div block
div block
div block
div block

div
 border: 1px solid #000
 display: block
 height: 50px
 margin: 10px 20px

display: inline

<span>, <a>的預設屬性
不會像block一直往下掉
排版css支援情況
- height：不支援
- width：不支援
- margin：僅支援margin-left、margin-right
- padding：僅支援padding-left、padding-right

div inline
div inline
div inline
div inline
div inline

div
 border: 1px solid #000
 display: inline
 height: 50px
 margin: 10px 20px

display: inline-block

<img>預設屬性
元素不會往下掉，會往右排
排版css支援情況
- height：不支援
- width：不支援
- margin：支援
- padding：支援

div inline-block
div inline-block
div inline-block
div inline-block
div inline-block

div
 border: 1px solid #000
 display: inline-block
 height: 50px
 margin: 10px 20px

説明

FireFox的outline bug

解決方法

漸層原理説明

色塊

線性漸層色塊

圓形漸層色塊

説明

範例

説明

範例

説明

範例

方法一：指定CSS

方法二：指定JavaScript

情況

解決：border-collapse

説明

條件

範例

沒有設index的情況下，HTML下面的元素會蓋掉上面的元素

設定z-index，優先顯示目標元素

説明

範例

問題背景

橫向排列：inblock

縱向排列：float

注意：周邊元素必須指定clear

説明

範例

指定不要選到某class的元素

指定不要選到某attribute的元素

多重條件

色彩增值模式 multiply

濾色模式 screen

範例

stroke-dasharray屬性介紹

補充：stroke-dasharray的多層次指定

stroke-dashoffset屬性介紹

圓形的stroke：百分比進度條

RWD寬度範例

圖片RWD

JavaScript與螢幕寬度

Media Query的三種寫法

⑴ 直接寫在CSS內

⑵ <link>外連

⑶ import引入

STEP① HTML

STEP② 索引CSS

STEP③ 手機版CSS

發生狀況

方法⑴ 偷改寬度法（爛方法）

方法⑵ 消除間隙法（認真法）

間隙處① html產生的文字空白

間隙處② border（或是padding等人）導致的外溢

做法剖析

原理說明

同場加映：HTML <mark>

線性漸層

顏色的百分比係數

色塊

圓形漸層

進階：用圓形漸層做radio button

原理剖析

快速複製區

X軸瞄點，可填入

Y軸瞄點，可填入

瞄點位置示範網站

動畫速度曲線

使用說明

content指定固定文字

content指定HTML Attribute

text-shadow

text-shadow 重複疊加

絕對定位法

flexbox法

text-align與line-height

table-cell法

25%、30%、75%圓弧

上述以外的圓弧（需使用傾斜矩形）

指定不要選到某`class`的元素

指定不要選到某`attribute`的元素

色彩增值模式 `multiply`

濾色模式 `screen`

`stroke-dasharray`屬性介紹

補充：`stroke-dasharray`的多層次指定

`stroke-dashoffset`屬性介紹

圓形的`stroke`：百分比進度條

⑵ `<link>`外連

⑶ `import`引入

間隙處② `border`（或是`padding`等人）導致的外溢

同場加映：HTML `<mark>`