[快速入门前端 23] CSS 常见属性(3) 边框、表格及列表属性

border 边框

border，指的是边框，拥有三个必要属性 border-width、border-color、border-style，分别指定边框的宽度、颜色、样式，缺一不可，也可以写成複合属性 border，border 相关属性可作用于几乎所有的元素上。

border-width：边框宽度，属性值为 CSS 中可用的长度值border-color：边框颜色，色码或颜色关键字border-style：边框样式，主要分为 none (无边框)、dotted (圆点)、dashed (虚线)、solid (单线)、double (双实线) 等

範例：

/* 分开写 */.a {    border-width: 2px;    border-color: blue;    border-style: dashed;}/* 写成複合属性 */.b {    border: 2px green solid;}

边框圆角 border radius

在设定 border 时，预设都是直角，但为了美观我们经常将按钮或元素的四个边设为圆角，这时候就需要用到 border-radius。

属性名：border-radius属性值：是複合属性，可填写百分比、长度单位等。

语法：

border-radius: 20px; /* 同时设定四个角 */border-radius: 50%; /* 同时设定四个角为父元素的 50% 为圆角半径，元素会呈现圆形 */border-radius: 10px 20px 30px 40px; /* 分别为左上、右上、右下、左下 */

表格相关属性

单元格间距

属性名：border-spacing属性值：CSS 的长度单位
border-spacing 可以设定每个单元格与单元格的空白间距，与 HTML 的 cellspacing 属性相似。

语法：

border-spacing: 10px; /* 统一四周间距都是 10px */border-spacing: 5px 10px; /* 水平间距 5px，垂直间剧 10 */

合併单元格边框

属性名：border-collapse属性值：collapse (合併)、separate (分开)
border-collapse 预设为 separate，若指定为 collapse 则会将相邻的边框合併为一条，使 border-spacing 设定无效。

单元格宽度

在表格中，单元格宽度会依每格的内容自动计算，而若想要将宽度调整为固定则需使用 table-layout 进行设定。

属性名：table-layout属性值：fixed (单元格宽度均分固定)、auto (依照表格内容自动计算宽度，每一格宽度可能不同)

範例：
下面有两个表格，我们可以比较 table-layout 为 auto (预设) 及 fixed 的差异。

table {    border-collapse: collapse; /* 合併单元格边框 */    width: 500px;    text-align: center; /* 将表格内容文字置中 */}th, td {    border: 1px black solid; /* 设定单元格边框 */}.table2 {    table-layout: fixed; /* 指定表格二单元格宽度固定 */}

<table>    <caption>表格一</caption>    <thead>        <tr>            <th>表头</th>            <th>表头</th>            <th>12234表头</th>        </tr>    </thead>    <tbody>        <tr>            <td>内容</td>            <td>内容</td>            <td>内容</td>        </tr>    </tbody></table><br/><table class="table2">    <caption>表格二</caption>    <thead>        <tr>            <th>表头</th>            <th>表头</th>            <th>12234表头</th>        </tr>    </thead>    <tbody>        <tr>            <td>内容</td>            <td>内容</td>            <td>内容</td>        </tr>    </tbody></table>

表格名称位置

属性名：caption-side属性值：top、bottom
可指定表格名称位于表格上方或下方。

语法：

caption-side: top; /* 指定于上方，预设 */caption-side: bottom;

列表相关属性 list style 系列

list-style 系列可以设定列表相关的样式，只能作用于 ol、ul、li 这几个与列表相关的属性。

列表符号样式

属性名：list-style-type属性值：none (无符号)、circle (空心圆圈)、square (实心方块)、lower-alpha (小写英文)、upper-alpha (大写英文) 等作用于列表父元素 ul、ol 或列表子元素 li 都有效果

範例：

ul {    list-style-type: square;}

<ul>    <li>我是第一名</li>    li>我是第二名</li></ul>

列表符号位置

属性名：list-style-position属性值：inside (符号在 li 里面)、outside (符号在 li 外面)

.a {    list-style-position: inside;}.b {    list-style-position: outside;}

<ul class="a">    <li>我是 inside</li>    <li>inside</li></ul><ul class="b">    <li>我是 outside</li>    <li>我是第二名</li></ul>

自定义列表符号

属性名：list-style-image属性值：url('图片位置');

.a {    list-style-image: url('https://cdn-icons-png.flaticon.com/512/1006/1006771.png');}

<ul class="a">    <li>我是 inside</li>    <li>inside</li></ul>

列表样式组

属性名：list-style属性值：是 list-style-type、list-style-position、list-style-image 的複合属性，没有必要属性和顺序的要求。

範例：

.a {  list-style: circle; /* 只写 type */  list-style: square inside; /* 指定 type 和 position */  list-style: inside; /* 只有 position */}

---

上一篇：[快速入门前端 22] CSS 常见属性(2) 文字样式和对齐
下一篇：[快速入门前端 24] CSS 常见属性(4) 背景和滑鼠动态属性
系列文章列表：[快速入门前端] 系列文章索引列表