## 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>