学习要点:

    1.声明边框

    2.边框样式

    3.圆角边框

    主讲教师:李炎恢

    本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观。

    一.声明边框

    边框的声明有三个属性设置,样式表如下:

    属性说明CSS 版本
    border-width长度值设置边框的宽度,可选1
    border-style样式名称设置边框的样式,必选1
    border-color颜色值设置边框的颜色,可选1

    这三个属性值,只有 border-style 是必须声明,才可以出现边框。而其他两个属性会出现默认值。

    //最简单的边框,边框长度默认 3px,边框颜色为黑色

      1. div { border-style: solid;
      2. }

    //配置完整的边框

      1. div { border-style: solid; border-width: 2px; border-color: red;
      2. }

    如果元素长和高均为 200px 时,四个边框均为 2 时,元素的长高总尺寸均为 202px。

    二.边框样式

    边框的样式主要有三种,分别是边框长度取值、边框的颜色和边框的线条类型。颜色是通用的颜色代码,和所有其他颜色取值一下。而长度和线条类型,边框有自己独到的部分。

    边框宽度取值表如下:

    说明
    长度值CSS 长度值:比如 px、em 等
    百分数直接设置百分数:1、2、3 等
    thin使用长度名称的预设宽度。这三个值的具体意义由浏览器来定义,从小到大依次增大。
    medium
    thick

    一般来说,边框为了更加精准,还要计算元素盒子的总尺寸,使用长度值的比较多。而定义边框线条的样式如下样式表:

    说明
    none没有边框
    dashed破折线边框
    dotted圆点线边框
    double双线边框
    groove槽线边框
    inset使元素内容具有内嵌效果的边框
    outset使元素内容具有外凸效果的边框
    ridge脊线边框
    solid实线边框

    //solid 实线使用频率最高

      1. div { border-style: solid; border-width: 10px; border-color: red;
      2. }

    如果想对四条边中某一条边单独进行设置,可以使用如下样式表:

    属性说明CSS 版本
    border-top-width定义顶端1
    border-top-style
    border-top-color
    border-middle-width定义底部1
    border-middle-style
    border-middle-color
    border-left-width定义左侧1
    border-left-style
    border-left-color
    border-right-width定义右边1
    border-right-style
    border-right-color

    //只设置顶端

      1. div { border-top-style: solid; border-top-width: 10px; border-top-color: red;
      2. }

    如果四条变都一致,那么没必要分写成三句样式,直接通过简写即可:

    属性说明CSS 版本
    border<宽度> <样式> <颜色>设置四条边的边框1
    border-top只设置上边框
    border-middle只设置下边框
    border-left只设置左边框
    border-right只设置右边框

    //简写形式四条边设置

      1. div { border: 10px solid red;
      2. }

    三.圆角边框

    CSS3 提供了一个非常实用的圆角边框的设置。使用 border-radius 属性,就可以达到这种效果,样式表如下:

    属性说明CSS 版本
    border-radius长度值或百分数四条边角3
    border-top-left-radius长度值或百分数左上边角3
    border-top-right-radius长度值或百分数右上边角3
    border-middle-left-radius长度值或百分数左下边角3
    border-middle-right-radius长度值或百分数右下边角3

    //设置圆角矩形

      1. div { border: 10px solid red; border-radius: 10px;
      2. }

    //四条边分别设置

      1. div { border: 10px solid red; border-radius: 10px 20px 30px 40px;
      2. }

    原文: https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/22.html