css底部边框_底部边框(CSS属性)

css底部边框

句法 (Syntax)

border-width ] [ border-width ] [ border-style ] [ border-style ] [ border-color ] | inherit } ; border-color ] | 继承};

描述 (Description)

The border-bottom shorthand property sets border-bottom-width and/or border-bottom-style and/or border-bottom-color to the bottom side of an element simultaneously.

border-bottom简写属性同时将border-bottom-width和/或border-bottom-style和/或border-bottom-color同时设置到元素的底部。

Borders are placed on top of the element’s background.

边框放置在元素背景的顶部。

(Example)

This style rule assigns a 2px blue border to the bottom side of paragraphs within the element with ID "example":

此样式规则为ID为"example"的元素内段落的底部分配2px的蓝色边框:

#example p {
  border-bottom: 2px solid blue;
}

(Value)

Refer to the following individual properties for specific information on allowed and initial values: border-width, border-style, and border-color.

有关允许和初始值的特定信息,请参考以下各个属性: border-widthborder-styleborder-color

Negative length values are illegal.

负长度值是非法的。

As with most shorthand properties, you don’t need to specify all the properties listed, but any omitted properties will revert to their default values. In the case of border-style, if you omit a value no border will show at all, because the default value is none. A border will only be visible as long as the border-style property has been set to something other than none or hidden, or has been restated explicitly after the initial shorthand declaration. Otherwise, no border will show and the border-width will be reset to zero. Therefore, its good practice to specify a value for the border’s style when you’re using shorthand notation.

与大多数速记属性一样,您无需指定所有列出的属性,但是任何省略的属性都将恢复为其默认值。 在border-style的情况下,如果省略一个值,则根本不会显示任何边框,因为默认值为none 。 仅当border-style属性设置为nonehidden以外的其他值,或者在初始速记声明后已明确地重新设置边框时,边框才可见。 否则,将不会显示任何边框,并且border-width将重置为零。 因此,在使用速记符号时,最好为边框的样式指定一个值。

翻译自: https://www.sitepoint.com/border-bottom-css-property/

css底部边框

css 设置border边框颜色渐变效果 上下的九宫格执行水平方向的重复属性(拉伸或平铺),左右的格子执行垂直方向的重复属性(拉伸或平铺),而中间的那个格子则水平重复和垂直方向的重复都要执行。下图是起始点到10%的位置标蓝色,10%到30%蓝到白的渐变,30%到70%为白到橘的渐变,从70%到结束标记橘色。从上到下,从起始开始,透明向蓝色渐变到20%的位置,然后又向透明进行渐变到99%的位置,99%到结束是透明。创建线性渐变,需要设置一个起始点和方向(或角度),还要定义终止色,以及两者之间的可选色(可以有多个)。随着渐变的重复,颜色再次循环。... 阅读详情

相关推荐

CSS border-bottom-width 属性

border-bottom-width属性设置元素的底部边框宽度。注意务必先声明border-style属性才可以设置border-bottom-width属性。元素必须有边框,你才可以改变宽度。默认值:medium继承:no版本:CSS1object。

shengyin714959的博客 605

CSS实现边框底部渐变色的4种方法

这我觉得最优雅的一种方法,只需要用到单层元素,为其分别设置 background-clip、background-origin、background-image 这三个属性,每个属性设置两组值,第一组用于设置border内的单色背景,第二组用于设置border上的渐变色。使用两个盒子叠加,给外层的盒子设置渐变色背景和 padding,给内层盒子设置纯色背景。

weixin_46382293的博客 4779

CSS 边框

CSS 边框 CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框   红色底部边框   圆角边框   左侧边框带宽度,颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式 border-style 值: none: 默认无边框   dotted: 定义一个点线边框   dashed: 定义一个虚线边框   solid: 定义实线边框   double: 定义两个边框。 两个边框的宽度和 border-width 的值相同   groove: 定义3D沟槽边框。效果取决于边框的颜色值   ridge:

CSS】Border 边框

总结 1. 基本属性 border-width:设置边框的粗细 border-color:设置边框的颜色 border-style:设置边框的类型 (1)简写语法:border: border-width border-style border-color 注意:三个属性的顺序任意,个数任意,但是这三个属性中必须要有 “border-style”。 (2)对边框...

Dora_5537的博客 1901

CSS-底部边框 | border-bottom

border-bottom 简写属性把下边框的所有属性:border-bottom-color,border-bottom-style与border-bottom-width设置到了一个声明中。这些属性描述了元素的下边框样式。 border-bottom: 1px; border-bottom: 2px dotted; borde...

weixin_34355881的博客 1万+

CSS 基础:border 的 3 个基础属性和简写方法

你好,我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集264篇原创内容-gzh后台回复“”可获取开发工具,持续更新中后台回复“”可得到前端基础100题汇总,持续更新中border(边框)是 CSS 中用来装饰元素周围区域的样式属性,主要作用是美化页面元素并提供视觉分隔效果。那我们一起来看一看它的基础属性,简写方法吧。

u013179804的博客 1万+

css基础--border属性

1、border不支持百分比 border-width还支持若干关键字, thin:薄薄的,等同于1px。 medium(默认值):薄厚均匀,等同于3px。 thick:厚厚的,等同于4px。 border属性的默认宽度大小是medium, 2、border-style:默认none; 实现一个没有下边框边框效果: div { border: 1px solid; border-bottom: none; } 或者 div { border: 1px solid; border-bottom: 0; }

chujinmaolu的博客 8544

css属性基础以及wxss——居中,渐变色边框,圆角边框,横向布局,重叠div,div固定在底部,input的无边框显示下划线

text-align: center;——子item居中对齐 display: flex;——子item横向布局 -webkit-justify-content: center;——子item居中 margin: auto;——子item居中 background: #f4f4f4;——背景色(background-color: yellowgreen;) opacity: 0.5...

meixi_android的博客 3962

HTML底部线条阴影,边框四边阴影CSS(box-shadow属性)内侧阴影、外侧阴影、阴影颜色CSS大全...

1、先来一个最简单最常用的box-shadow属性阴影案例:边框阴影,四边都是阴影,目前扁平化网站中唯一常用的一种效果,特别是鼠标触发后边框带阴影更是常用。上图的代码和CSS如下:html>无标题文档div{width:500px;height:200px;border:1pxsolid#eee;box-shadow:005pxrgba(0,0,0,.1);}哈哈,我...

weixin_27033895的博客 4149

0.5px的边框线css实现的方法

.grid-text :after{ content: ' '; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #979797; /* 如果不用 background-color, 使用 border-top:1px solid #979797; 效果是一样的*/ -webkit-transform: scaleY(0.5); ..

weixin_43824675的博客 707

CSS改变(隐藏)表格边框样式

CSS改变表格边框样式,很实用的一种方法。 制作方法: 将下面的代码复制到~里,此为隐藏下边框 隐藏下边隐藏下边 将下面的代码复制到~里,此为隐藏上边框 隐藏上边框 隐藏上边框 将下面的代码复制到~里,此为隐藏左边框 隐藏左边框 隐藏左边框  将下面的代码复制到~里,此为隐藏

auvfk7yi的专栏 2749

table 添加表行的底部边框、定制表格边框

我已经3×3的表格需要一种方法来添加边框底部具有特定颜色中的每一行<tr>首先,我试图直接的方式,是 <tr style="border-bottom:1pt solid black;"> 但没有奏效。 所以我说的CSS 这样 tr { border-bottom: 1pt solid black; } 仍然没有工作。 我宁愿CSS的话,我不需要添加样式...

dichen3165的博客 399

鼠标滑动 边框底部特效

前端领域当中,页面特效是一个既熟悉又好玩的一个操作点,今天在项目中用到了边框底部特效,直接上效果代码(CSS使用的是scss)         HTML代码   &lt;ul&gt; &lt;li&gt;&lt;span&gt;首页&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; CSS代码: ul{ ...

qingzhishui的博客 599

css——after伪元素的使用

[]:after会在被选中的元素最后增加一个伪元素. 有以下两个比较重要的特点: ① 默认是行内元素 ② css2的写法是":after",css3里为区分伪元素和伪类,写法是“::after” 栗子1: css: div::after { content:"你好" } html: <div>哈哈哈哈。</div> 它通过属性content来控制在选中元...

qq1722377628的博客 2807

CSS2 样式表(属性·边框)

1、border   语法:border : border-width || border-style || border-color 取值:该属性是复合属性。请参阅各参数对应的属性。默认值为: medium none

做最好的自己 1661

css边框只显示一半,CSS边框只有一半作品

我正在使用CSS创建一个围绕内容的边框,但只有角落图像显示,而不是重复的顶端或底部CSS边框只有一半作品.blog {-moz-border-image: url(divborder.png) 30 27 27 repeat;-webkit-border-image: url(divborder.png) 30 27 27 repeat;-o-border-image: url(divbord...

weixin_42607969的博客 2589

DIV相对于父DIV底部对齐的实现方法-Div+CSS教程

1: 底部对齐的代码(相对于父块): <style type="text/css">.box1 {border:1px #cccccc solid; width:500px; height:600px;position:relative;}.box2 {border-top:1px #cccccc solid; background:#f2f6fb; width:498px; he...

weixin_34379433的博客 793
上一篇: css类选择器与id选择器_类选择器(CSS选择器)
下一篇: html 元素兄弟元素_正文(HTML元素)
culi3182
博客等级 码龄10年 26粉丝 179原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值