• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • border-width

    border-width 属性可以设置盒子模型的边框宽度。它是border-top-width, border-right-width, border-bottom-width,和 border-left-width的简写;

    示例

    /* 用法一:明确指定宽度值 */
    /* 当给定一个宽度时,该宽度作用于选定元素的所有边框*/
    border-width: 5px;
    
    /* 当给定两个宽度时,该宽度分别依次作用于选定元素的横边与纵边 */
    border-width: 2px 1.5em;
    
    /* 当给定三个宽度时,该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
    border-width: 1px 2em 1.5cm;
    
    /* 当给定四个宽度时,该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 (即按顺时针依次作用) */
    border-width: 1px 2em 0 4rem;
    
    /* 用法二:使用全局关键字 */
    /* 可以使用的全局关键字有:inherit(继承),initial(初始值),unset(不设置) */
    border-width: inherit;
    
    /* 用法三:使用作用于 border-width 的关键字*/
    border-width: thin;
    border-width: medium;
    border-width: thick;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持border-width

    语法

    border-width:<width>| thin| medium| thick

    设置或检索对象的边框宽度。

    • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
    • 如果只提供一个,将用于全部的四边。
    • 如果提供两个,第一个用于上、下,第二个用于左、右。
    • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
    • 如果border-style设置为none或hidden,border-width的使用值将为0。
    • 对应的脚本特性为borderWidth

    取值

    • <width>:用长度值来定义边框的厚度。不允许负值。请看<width>
    • thin:定义默认厚度的边框。计算值为3px。
    • thick:定义比默认厚度粗的边框。计算值为5px。
    关键字实例说明
    thin
    细边线
    medium
    中等边线
    thick
    宽边线

    例子

    <p id="sval">
       one value: 6px wide border on all 4 sides</p>
    <p id="bival">
       two different values: 2px wide top and bottom border, 10px wide right and left border</p>
    <p id="treval">
       three different values: 0.3em top, 9px bottom, and zero width right and left</p>
    <p id="fourval">
       four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>
    
    //CSS
    
    #sval {
       border: ridge #ccc;
       border-width: 6px;
    }
    #bival {
       border: solid red;
       border-width: 2px 10px;
    }
    #treval {
       border: dotted orange;
       border-width: 0.3em 0 9px;
    }
    #fourval {
       border: solid lightgreen;
       border-width: thin medium thick 1em;
    }
    p {
       width: auto;
       margin: 0.25em;
       padding: 0.25em;
    }
    

    上篇:border

    下篇:box-shadow