CSS学习笔记：边框样式，列表符号【7/27】-工具盒子

边框样式

border-width

border-width用于定义边框的宽度，通常是一个像素值。

border-style

border-style用于定义边框的风格，通常有三种：

| 属性 | 说明 | |--------|-----| | none | 无样式 | | dashed | 虚线 | | solid | 实线 |

除了上表列出这几个，还有hidden、dotted、double等取值。不过其他取值几乎用不上，可以直接忽略。

border-color

border-color属性用于定义边框的颜色，取值可以是"关键字"或"16进制RGB值"。

简写方式

在css中可以使用简写方式：

border:1px solid red;

等价于：

border-width:1px;
border-style:solid;
border-color:red;

这个技巧在我们实际开发中使用非常方便！

一个元素其实有四条边（上下左右），通常对某一条边进行单独设置！

上边框border-top

border-top-width:1px;
border-top-style:solid;
border-top-color:red;

简写形式：

border-top:1px solid red;

下边框border-bottom

border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:red;

简写形式：

border-bottom:1px solid red;

左边框border-left

border-left-width:1px;
border-left-style:solid;
border-left-color:red;

简写形式：

border-left:1px solid red;

右边框border-right

border-right-width:1px;
border-right-style:solid;
border-right-color:red;

简写形式：

border-right:1px solid red;

对于边框样式，不管是整体样式，还是局部样式都要设置三个方面。边框宽度，边框外观，边框颜色。

列表项符号：list-style-type

在css中，不管是有序列表还是无序列表，都使用list-style-type来定义列表项符号。

语法：list-style-type:取值;

说明：list-style-type属性是针对 ol或 ul元素的，而不是li元素，其中，list-style-type属性取值如下表：

针对ol的属性取值：

| 属性值 | 说明 | |-------------|---------------------| | decimal | 阿拉伯数字：1，2，3...(默认值) | | lower-roman | 小写罗马数字：i,ii,iii... | | upper-roman | 大写罗马数字：I,II,III... | | lower-alpha | 小写英文字母：a,b,c... | | upper-alpha | 大写英文字母：A，B，C... |