学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(十四) 轮廓outline

发布时间:2020-01-10点击:

    在CSS样式表中标签元素除了边框还有一个可以属性可以起到突出元素的作用,那就是轮廓outling.

    一、轮廓简介

    轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

    CSS outline 属性规定元素轮廓的样式、颜色和宽度。

    二、设置轮廓的颜色

    在CSS中想要设置轮廓的颜色可以使用outline-color属性来设置,其值与前面涉及到颜色的一样,

    name - 指定颜色的名称,如 "red"

    RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

    Hex - 指定16进制值, 如 "#ff0000"

    PS:在设置轮廓颜色之前请务必设置好outline-style属性,否则颜色设置将不起作用。

    三、设置轮廓的样式

    轮廓的样式是outline-style属性设置的,其值与border-style相似,有:


    描述
    none
    默认值,设置无轮廓
    dotted
    设置轮廓为点状
    dashed
    设置轮廓为虚线
    solid
    设置轮廓为实线
    double
    设置轮廓为双线
    groove
    设置轮廓为3D凹槽
    ridge
    设置轮廓为3D凸槽
    inset
    设置轮廓为3D凹边
    outset
    设置轮廓为3D凸边
    inherit
    设置轮廓为继承父元素

    四、轮廓的宽度

    轮廓的宽度是用outline-width来定义实现的,与border相同,其值可以是:1px  1em  thick  medium(默认值)  thin。具体使用,请参照border-width的使用。

    五、简写属性

    简写属性使用outline来定义的,其定义顺序是:

    outline:color style width;

    、outline轮廓属性一览

    序号
    属性
    作用
    1
    outline
    简写属性,设置轮廓
    2
    outline-color
    设置轮廓的颜色
    3
    outline-style
    设置轮廓的样式
    4
    outline-width
    设置轮廓的宽度

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

题库内容推荐