## PX單位 像素 (計算機屏幕上的一個點) <br> ## 寬度 ~~~css /* 寬度設置 大小+單位 */ width: 100px; ~~~ <br> ## 高度 ~~~css /* 高度設置 大小+單位 */ height: 100px; ~~~ <br> ## 顏色 #### 紅綠藍三原色 (RGB) * 黑色 rgb(0,0,0) * 藍色 rgb(0,0,255) * 紅色 rgb(255,0,0) * 綠色 rgb(0,255,0) * 白色 rgb(255,255,255) <br> #### 十六進制 (hex) * 黑色 #000000 * 藍色 #0000FF * 紅色 #FF0000 * 綠色 #00FF00 * 白色 #FFFFFF <br> #### 顏色英文關鍵字(不推薦) [點擊看關鍵字參考](http://www.w3school.com.cn/cssref/css_colornames.asp) <br> #### 透明色 transparent <br> <br> ## 邊框 ~~~css /* 上邊框 */ border-top: 10px solid blue; /* 右邊框 */ border-right: 10px solid blue; /* 下邊框 */ border-bottom: 10px solid blue; /* 左邊框 */ border-left: 10px solid blue; /* 上下左右4條邊框 */ border: 10px solid blue; /* solid是實線，dashed是虛線 */ ~~~ <br> ## border-radius 圓角設置 ~~~ div{ background-color: red; width: 100px; height: 100px; /* 圓角的圓弧半徑 */ border-radius: 50px; } ~~~ ## 邊框畫三角形 #### 邊框寬度的本質 ~~~css .div { width:30px; height:30px; border-width:30px 30px 30px 30px; border-style:solid; border-color:green red blue yellow; } ~~~  上下左右銜接的地方是45度拼接 <br> <br> #### 高寬為0 ~~~css .div { width:0px; height:0px; border-width:30px 30px 30px 30px; border-style:solid; border-color:green red blue yellow; } ~~~  整個div直接變成4個三角形 <br> <br> #### 三角形 ~~~css .div { width:0px; height:0px; border-width:30px 30px 30px 30px; border-style:solid; border-color:green transparent transparent transparent; } ~~~  整個div直接變成4個三角形 <br> <br>