CSS-边框底部宽度 | border-bottom-width

简介:

CSS属性 border-bottom-width 设置一个元素的底部边框宽度。

/* Keyword values */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

/* <length> values */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

/* Global keywords */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;

初始值

medium

适用元素

all elements. It also applies to ::first-letter.

是否是继承属性

no

适用媒体

visual

计算值

the absolute length or 0 if border-bottom-style is none or hidden

Animation type

a length

正规顺序

the unique non-ambiguous order defined by the formal grammar

语法

br-width>定义边界的宽度,可以是明确的非负值<length>或关键字。如果是关键字,则必须是以下值之一:

thin

A thin border

medium

A medium border

thick

A thick border

注意:由于规范没有定义每个关键字所表示的精确厚度,因此使用其中一个关键字的精确结果是特定于实现的。尽管如此,它们总是遵循这个模式thin ≤ medium ≤ thick,价值在一个单一的文件中是不变的。

正式语法

<br-width>where 
<br-width> = <length> | thin | medium | thick

示例

HTML

<div>Element 1</div>
<div>Element 2</div>

CSS

div { 
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}

结果

规范

Specification

Status

Comment

CSS Backgrounds and Borders Module Level 3The definition of 'border-bottom-width' in that specification.

Candidate Recommendation

No significant change.

CSS Level 2 (Revision 1)The definition of 'border-bottom-width' in that specification.

Recommendation

No significant change.

CSS Level 1The definition of 'border-bottom-width' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

1.0

(Yes)

1.0 (1.0)

4.0

3.5

1.0 (85)

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

2.3

(Yes)

1.0 (1.0)

6.0

11

1.0

另见

  • 其他的与border-width相关的CSS属性:border-left-widthborder-right-widthborder-top-width,和border-width
  • 另外底部边框相关的CSS属性:borderborder-bottomborder-bottom-style,和border-bottom-color
相关文章
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
前端开发 容器
给 CSS 盒子模型添加边框时,需要注意什么?
在给CSS盒子模型添加边框时,需要注意边框的宽度、样式和颜色,以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度,可能需要调整其他属性以保持布局的完整性。
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
286 3
|
前端开发
边框也疯狂:CSS创造令人瞩目的流光闪烁效果!
边框也疯狂:CSS创造令人瞩目的流光闪烁效果!
|
前端开发 容器
边框线条的魔法:CSS动画效果,让网页设计流动起来!
边框线条的魔法:CSS动画效果,让网页设计流动起来!
|
前端开发
前端 CSS 经典:旋转边框效果
前端 CSS 经典:旋转边框效果
282 0
|
Web App开发 前端开发 iOS开发

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    400
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    305
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    271
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    183
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    399
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    582
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    602
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    186
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    527
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    343