点此查看 所有教程、项目、源码导航

本文目录

• 1. 前言
• 2. 边框的样式
• 3. 边框宽度
• 4. 边框颜色
• 5. 简写属性
• 6. 单独设定各边样式
• 7. 小结

1. 前言

边框是使用频率很高的样式，图片可以加边框，表格基本都是带边框的，所以边框的学习是很重要的。

本篇就来介绍下CSS边框的用法。

2. 边框的样式

可以通过border-style设置边框样式，常用的有solid实线、dotted点线、dashed虚线三种。

	<p class="border-solid">
        演示实线边框
    </p>
    <p class="border-dotted">
        演示点线边框
    </p>
    <p class="border-dashed">
        演示虚线边框
    </p>

CSS代码：

		.border-solid {
            border-style: solid;
        }

        .border-dotted {
            border-style: dotted;
        }

        .border-dashed {
            border-style: dashed;
        }

效果如下：

3. 边框宽度

可以通过border-width调整边框的宽度，单位一般使用px像素。

	<p class="border-thick">
        演示粗边框
    </p>
    <p class="border-thin">
        演示细边框
    </p>

CSS代码，当日具体的宽度，可以根据实际情况调整，我此处仅仅为了演示。

		.border-thick {
            border-style: solid;
            border-width: 4px;
        }

        .border-thin {
            border-style: solid;
            border-width: 1px;
        }

效果如下：

4. 边框颜色

可以使用bolder-color指定边框的颜色，HTML代码：

	<p class="border-red">
        演示红色边框
    </p>
    <p class="border-green">
        演示绿色边框
    </p>

CSS代码：

		.border-red {
            border-style: solid;
            border-color: red;
        }

        .border-green {
            border-style: solid;
            border-color: green;
        }

效果如下：

5. 简写属性

大家想必发现了，我们在设定边框样式时，一般都会同时设定边框样式、宽度、颜色，如果逐一定义，比较麻烦。

所以CSS还提供了简写属性：

	<p class="border-simple">
        使用简写属性
    </p>

CSS代码：

 		/* 使用简写属性，边框样式为实线、宽度1px、颜色蓝色 */
        .border-simple {
            border: solid 1px blue;
        }

效果如下：

一般情况下，边框都是使用简写属性来编写，因为这样写比较简单。

6. 单独设定各边样式

还支持单独设定上边框、下边框、左边框、右边框的样式：

	<p class="border-each">
        单独设定各边框样式
    </p>

CSS代码：

		.border-each {
            border-top: solid 1px blue;
            border-bottom: solid 1px green;
            border-left: dashed 1px grey;
            border-right: dashed 1px grey;
        }

效果如下：

7. 小结

边框一般掌握简写方法就够了。