CSSoutline（轮廓）

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网络空间、营销软件、网站建设、江油网站维护、网站推广。

轮廓和边框看起来非常相似，但它们之间也并非没有区别，例如：

• 元素上下左右四个方向上边框的样式、宽度、颜色可以单独设置，而轮廓在元素四个方向的宽度、样式、颜色都是相同的，不能单独设置；
• 边框的宽度会直接影响元素的尺寸，而轮廓不会占用页面空间，不会影响页面的布局，但是轮廓会与页面上的其它元素发声重叠；
• 除了会与周围的元素发声重叠外，轮廓对周围的元素没有任何影响；
• 边框是元素尺寸的一部分，而轮廓不是，也就是说无论轮廓的宽度是多少，元素的尺寸都不会改变；
• 轮廓可以不是矩形的，但您不能直接创建圆形轮廓。

您可以使用下面几个属性来为元素设置轮廓：

• outline-color：设置轮廓的颜色；
• outline-style：设置轮廓的样式；
• outline-width：设置轮廓的宽度；
• outline：轮廓的简写属性，可以使用 outline 属性中同时设置上面的三个轮廓属性；
• outline-offset：设置轮廓与边框之间的距离。

1. outline-style

outline-style 属性可以设置轮廓得样式，属性得可选值如下所示：

【示例】使用 outline-style 属性设置轮廓的样式：

    


    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset

运行结果如下图所示：

注意：因为轮廓的默认样式为 none，所以您必须指定轮廓的样式才可以使轮廓显示在元素周围。

2. outline-width

outline-width 属性用来设置轮廓的宽度，只有当 outline-style 属性的值不为 none 时，outline-width 属性才会生效。outline-width 属性的可选值如下：

【示例】使用 outline-width 属性设置轮廓的宽度：

运行结果如下图所示：

3. outline-color

outline-color 属性用来设置轮廓的颜色，属性的可选值如下：

注意：如果只设置 outline-width 或 outline-color 属性的话，轮廓的设置并不会生效。您必须使用 outline-style 属性设置了轮廓的样式之后，才可以使用 outline-width 和 outline-color 属性来设置轮廓的宽度和颜色。

【示例】使用 outline-color 属性设置轮廓的颜色：

    


    
red
    
#AAA
    
rgb(217, 0, 217)

运行结果如下图所示：

4. outline

outline 属性是上述 outline-width、outline-style、outline-color 三个属性的简写形式，使用 outline 属性可以同时设置这三个属性中的一个或多个，语法格式如下：

outline: outline-width outline-style outline-color;

在使用 outline 属性时，outline-width、outline-style、outline-color 这几个参数的顺序并不是固定的，您可以按照上面语法中介绍的顺序，也可以根据自己的喜好改变它们的顺序。

【示例】使用 outline 属性设置元素的轮廓：

    


    
red
    
#AAA
    
rgb(217, 0, 217)

运行结果如下图所示：

5. outline-offset

默认情况下轮廓是紧贴着边框的，通过 outline-offset 属性可以设置轮廓与边框之间的距离，属性的可选值如下：

【示例】使用 outline-offset 设置轮廓与边框之间的距离：

运行结果如下图所示：