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

搜索

首页>>编程语言>>python>>基础教程

CSS基础教程(十一) 边框

发布时间:2020-01-07 点击:74

    在CSS样式表中,有很多关于边框的属性,比如说:边框线样式、边框颜色、边框宽度等。

    一、CSS设置边框颜色

    在CSS中设置边框颜色的属性是border-color,其值和前面说的一样有三种定义方式:

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

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

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

    PS:在CSS中单独设置border-color属性是不起作用的,这个属性必须在边框设置了样式(border-style)的基础上进行。

    设置边框颜色实例如下:

    代码是:

    <style>
    span{
        border-style: solid;
        border-color: red;	
    }
    </style>
    <span>hello mihuguan</span>

    如果想要设置某一边的边框颜色可以选择下面属性:

    border-top-color:设置上边框颜色;

    border-right-color:设置右边框颜色;

    border-bottom-color:设置下边框颜色;

    border-left-color:设置左边框颜色;

    二、CSS设置边框样式

    边框样式的设置属性的border-style,其值有如下:

    同上面一样,如果想要设置某一边的边框可以使用:

    border-top-style:设置上边框样式;

    border-right-style:设置右边框样式;

    border-bottom-style:设置下边框样式;

    border-left-style:设置左边框样式。

    三、边框宽度

    边框宽度的属性是border-width设置的,其值可以是1px  1em  thick  medium(默认值)  thin,其中三个关键字设置的的效果如下:

    PS:CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。

    设置某一边的边框宽度可以使用:

    border-top-width:设置上边框的宽度

    border-right-width:设置右边框的宽度

    border-bottom-width:设置下边框的宽度

    border-left-width:设置左边框的宽度

    四、简写属性

    border:10px solid red;
    简写属性时的顺序是:

    1、border-width;

    2、border-style;

    3、border-color.

    五、边框属性统计表

    序号
    属性
    描述
    1
    border
    简写样式设置边框属性
    2
    border-style
    设置边框样式
    3
    border-width
    设置边框宽度
    4
    border-color
    设置边框颜色
    5
    border-top-style
    设置上边框样式
    6
    border-right-style
    设置右边框样式
    7
    border-bottom-style
    设置下边框样式
    8
    border-left-style
    设置左边框样式
    9
    border-top-width
    设置上边框宽度
    10
    border-right-width
    设置右边框宽度
    11
    border-bottom-width
    设置下边框宽度
    12
    border-left-width
    设置左边框宽度
    13
    border-top-color
    设置上边框颜色
    14
    border-right-color
    设置右边框颜色
    15
    border-bottom-color
    设置下边框颜色
    16
    border-left-color
    设置左边框颜色
    17
    border-top
    设置上边框简写属性
    18
    border-right
    设置右边框简写属性
    19
    border-bottom
    设置下边框简写属性
    20
    border-left
    设置左边框简写属性
    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

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

相关链接

搜索