一、边框的属性

下面详细介绍一下border-width、border-style以及border-color属性。

1．border-width

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

2．border-style

border-style属性用于定义边框的外观，常用取值如下表所示。

表1 border-style属性取值
属性值 说明
none 无样式
dashed 虚线
solid 实线

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

3．border-color

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

举例：为div加上边框

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义所有div样式*/
        div
        {
            width:100px;
            height:30px;
        }
        /*定义单独div样式*/
        #div1
        {
            border-width:1px;
            border-style:dashed;
            border-color:red;
        }
        #div2
        {
            border-width:1px;
            border-style:solid;
            border-color:red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

width属性用于定义元素的宽度，height属性用于定义元素的高度。这两个属性我们在后面会介绍。

举例：为img加上边框

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img
        {
            border-width: 2px;
            border-style:solid;
            border-color:red;
        }
    </style>
</head>
<body>
    <img src="img/haizei.png" alt="海贼王之索隆">
</body>
</html>

浏览器预览效果如下图所示。

二、简写形式

想要为一个元素定义边框，我们需要完整地给出border-width、border-style和border-color。这种写法代码量过多，很费时费力。不过CSS为我们提供了一种简写形式：

border: 1px solid red;

上面代码其实等价于：

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

这是一个非常有用的技巧，在实际开发中我们都是使用这种简写形式。可能一开始用起来比较生疏，不过写多了自然就熟练了。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{ border: 1px solid red; }
    </style>
</head>
<body>
    <div>绿叶学习网，给你初恋般的感觉。</div>
</body>
</html>

浏览器预览效果如下图所示。