2019-12-30（ 边框）

border 边框（一个边框的设置，需要设置边框的宽度、颜色、边框的样式）

border-width 边框宽度（单位：px）

border-color 边框颜色（三种形式）

• 关键词（英文颜色单词，例如：red）
• RGB（三原色，利用ps工具获取这些数值 CMYK）
• RGBa ( alpha 不透明度 )
• 十六进制颜色（0123456789abcdef）

border-style 边框样式（三种形式）

• solid 直线
• dotted 点线 …
• dashed 虚线 -----------------
• double 双线

多值书写： 上右下左 顺时针
一个值（上右下左）
两个值（上下 和 左右）
三个值（上 和 左右 和 下）
四个值（上 和 左 和 下 和 右）

复合样式： 语法糖 border: width style color; 顺序无所谓

• border-left：边框宽度 边框样式 边框颜色;
  border-left-width:左边框宽度;
  border-left-color:左边框颜色;
  border-left-style:左边框样式;
• border-right 右边框
  border-right-width
  border-right-color
  border-right-style
• border-top 上边框
  border-top-width
  border-top-color
  border-top-style
• border-bottom下边框
• 

层叠样式表：

• 在样式表中，给同一个元素 添加 同一条样式，后面覆盖前面的

边框的特性：

• 同一个元素，相交的两条边框，连接处是斜线
• 元素的宽 = width + 边框 \ height + 边框

课程扩展
利用这样的边框及特性，我们可以做什么？

关键词：transparent 透明 ，让这个三角形毫无痕迹
rgba(red,green,blue,alpha) a - 控制透明度，取0 - 1的值，表示0%~100%
小数点前面的0可以省略，例如：0.5 -> .5

画完方，想画圆？ 十八般武艺之- 左手画方右手画圆

• border-radius：半径; 用于设置圆角（IE9之前不支持）
  半径（x/y）：
• 具体数值，单位px
• 百分比，单位 %

X，Y的值是一样的

X，Y的值不一样

多值书写：（从左上角开始）

• 一个值（左上和右上和右下和左下）
• 两个值（左上和右下 右上和左下）
• 三个值（左上 右上和左下 右下）
• 四个值（左上 右上 右下 左下）

总结

• width: 100px; 宽度； 单位 px pixel（理解成发光二极管）

• height: 200px; 高度；单位

• Border-width 边框的宽度 上 右 下 左

• border-style 边框的样式

• border-color 边框的颜色

• border复合样式 ： 上 右 下 左

• Border-radius：10px;

• 半径， X, Y 轴 ， 复合样式

• 要让边框不见：transparent