盒子模型:
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
一、边框:
边框颜色:
属性 | 说明 | 示例 |
border-top-color | 上边框颜色 | border-top-color:#369; |
border-right-color | 右边框颜色 | border-right-color:#369; |
border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
border-left-color | 左边框颜色 | border-left-color:#efcd56; |
border-color | 四个边框为同一颜色 | border-color:#eeff34; |
上、下边框颜色:#369 左、右边框颜色:#000 | border-color:#369 #000; | |
上边框颜色:#369 左、右边框颜色:#000 下边框颜色:#f00 | border-color:#369 #000 #f00; | |
上、右、下、左边框颜色: #369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
值 | 说明 |
---|---|
color | 指定背景颜色。在CSS颜色值查找颜色值的完整列表 |
transparent | 指定边框的颜色应该是透明的。这是默认 |
inherit | 指定边框的颜色,应该从父元素继承 |
2、边框粗细:border-width
值 | 描述 |
---|---|
thin | 定义细的边框。 |
medium | 默认。定义中等的边框。 |
thick | 定义粗的边框。 |
length | 允许您自定义边框的宽度。 |
inherit | 规定应该从父元素继承边框宽度。 |
3、边框样式:border-style
值 | 描述 |
---|---|
none | 定义无边框。 |
hidden | 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
inherit | 规定应该从父元素继承边框样式。 |
二、