网站地图    收藏   

主页 > 专题教程 > css >

border-width

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] border-width属性是用于设置一个元素的边框宽度的简写属性。它可以同时设置一个元素的border-top-width,border-right-width,border-bottom-width和border-left-width属性。...

border-width属性是用于设置一个元素的边框宽度的简写属性。它可以同时设置一个元素的,,和属性。

border-width属性的值可以是一个,两个,三个或四个。这些值可以是CSS 数据类型,或者是3个预定义的CSS边框宽度关键字之一:thinmediumthick

如果只为border-width属性设置一个值,那么元素的4个边框都使用该值来设置边框的宽度。

如果为border-width属性设置了两个值,那么第一个值指定元素上下边框的宽度,第二个值指定元素左右边框的宽度。

如果为border-width属性设置了三个值,那么第一个值指定元素上边框的宽度,第二个值指定元素左右边框的宽度,第三个值指定元素下边框的宽度。

如果为border-width属性设置了四个值,那么第一个值指定元素上边框的宽度,第二个值指定元素右边框的宽度,第三个值指定元素下边框的宽度,第四个值指定元素左边框的宽度。

官方语法
border-width: <border-width>{1,4}
/* 其中 */
<border-width> = <length> | thin | medium | thick
                            

参数:

  • <length>:使用数据类型来指定元素边框的宽度。
  • thin:边框的预定义宽度关键字。
  • medium:边框的预定义宽度关键字。
  • thick:边框的预定义宽度关键字。

border-width属性的初始值是它包含的各个具体边框宽度属性的初始值:

  • :medium
  • :medium
  • :medium
  • :medium

border-width属性可以使用inherit关键字从父元素中继承边框宽度。

在使用3个预定义宽度关键字时要注意,由于规范中并没有明确指出每一个关键字的具体宽度是多少,各个浏览器对于各个关键字的解释有所不同。因此在使用关键字作为边框的宽度时,在各个浏览器中渲染出来的实际边框宽度会有所差异。

应用范围

border-width属性可以应用在所有元素上。

示例代码

下面是border-width属性取值的一些示例代码。

/* border-width: width */
border-width: 5px;

/* 上下 | 左右 */
border-width: 2px 1.5em;

/* 上 | 左右 | 下 */
border-width: 1px 2em 1.5cm;

/* 上 | 右 | 下 | 左 */
border-width: 1px 2em 0 4rem;

border-width: inherit;                              
                            
在线演示

下面的例子使用border-width属性为元素设置边框宽度。

边框宽度为:50px 10px 10px 10px
.element {
    border-style: solid;
    border-width: 50px 10px 10px 10px;
    border-color: #22a7f0;
}                              
                            

浏览器支持

所有的现代浏览器都支持border-left-width属性,包括Chrome,Firefox,Safari,Opera,IE 以及 Android 和 iOS。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论