border-bottom(指定下边线的样式、宽度及颜色)

border-bottom: 值;

border-bottom-style:值;

border-bottom-color: 值;

border-bottom-width:值;

如:

border-bottom: solid 1px #ffff00;

border-bottom-style: outset;

border-bottom-color: #0000ff;

border-bottom-width:15px;

border-bottom属性用于指定下边线的样式、宽度及颜色,值之间用半角空格间隔,没有先后顺序。

关于border-bottom属性的样式的值,具体可参照边线的样式。边线的宽度的值,具体可参照边线的宽度

当分别指定下边线的样式、宽度、颜色时使用以下属性:

border-bottom的值及其说明
属性 说明
border-bottom solid 下边线为实线
其他的值还有:groove、dotted等,详细请参照边线样式
1px 下边线的宽度
使用数值可以表示边线的任意宽度,数值单位除了px,还有em、ex,详细请参照数值+单位
使用关键词指定
thin(细)、medium(普通)、thick(粗)
#ff0000 下边线的颜色
除了使用颜色代码表示具体颜色之外,边线还可以指定为透明即:transparent

实例

css文件

.sample1,.sample2,.sample3{

margin:0.5em;

padding:2px;

}

.sample1 {border-bottom: solid 1px #ffff00;}

.sample2 {border-bottom: groove 10px #00ff00;}

.sample3 {border-bottom-style: ridge;

border-bottom-color: #0000ff;

border-bottom-width:15px;

}

  

链接了上述css文件的html文件

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1">

<link href="material/border-bottom.css" rel="stylesheet" type="text/css" />

<title>border-bottom属性(http://wwww.manongjc.com)</title>

</head>

<body>

<div class="sample1">sample1:下边线 solid 1px #ffff00</div>

<div class="sample2">sample2:下边线 groove 10px #00ff00</div>

<div class="sample3">sample3:分别指定下边线的样式、宽度、颜色 </div>

</body>

</html>

参考阅读:http://www.manongjc.com/article/1190.html

 

css border-bottom(指定下边线的样式、宽度及颜色)的更多相关文章

  1. 清除Css中select的下拉箭头样式

    select {/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/appeara ...

  2. css清除select的下拉箭头样式

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  3. 小程序行内元素且有border的情况下,根据文字宽度自动调节元素宽度

    比如认识成都: <view style="display: flex;align-items: center;"> <text class="cityV ...

  4. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  5. css border

    CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...

  6. Css border样式

    1 四个边框 border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框样式使用border-top 设置上边框,一般单独设置上边框样式使用 ...

  7. css firefox火狐浏览器下的兼容性问题

    1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-al ...

  8. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  9. 第一章 Html+Css使用总结(下)

    1 开场 <!DOCTYPE html> <html lang="en"> <head> <!-- 对于中文网页需要使用 <meta ...

随机推荐

  1. python3:jsonpath-rw处理Json对象

    前提:接口自动化测试中,存在依赖情况:test_02的某个请求参数的值,需要依赖test_01返回结果中某个字段的数据,所以就先需要拿到返回数据中特定字段的值.这里使用到python中jsonpath ...

  2. Windows 下python的tab自动补全

    方法一:安装一个ipython就OK啦,而且关键字还能高亮显示呢 一.打开cmd,输入pip3 install ipython联网安装 二.安装成功后,cmd里运行ipython,成功啦. 方法二:写 ...

  3. 求a^b

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 求a^b 由于结果可能很大,我们现在只需要知道这个值 mod 1012就可以了(为什么是1012?我的生日) ...

  4. Qt 获取组合键 键盘按住某键 鼠标组合实现

    #include "mainwindow.h" #include <QDebug> #include <QKeyEvent> #include <QM ...

  5. 【linux基础】区块选择VisualBlock

    前言 有时候使用linux需要选择某一块区域进行处理,比如对某些列的某些行,类似于Ultraedit的列模式,其实vim中就有相关的功能,此时可以使用vim的区块选择进行处理. 区块选择 1.在一般模 ...

  6. 2017 ECL-FINAL J.Straight Master

    题目链接:http://codeforces.com/gym/101775/problem/J 思路:序列差分一下,然后用得到的查分序列乱搞就可以了 注意差分序列第一项等于a[i],之后n-1项为ch ...

  7. Javascript 在严格模式下不允许删除变量或对象

    如下代码,运行后在浏览器中会报错. <script> "use strict"; var x = 3.14; delete x; </script>

  8. Java中的null

    null是Java中的关键字,像public.static.final.它是大小写敏感的,你不能将null写成Null或NULL,编译器将不能识别它们然后报错. Object obj = NULL; ...

  9. js去除运营商或者路由器添加的广告脚本

    是不是偶尔发现在家里看网页的时候回插入一个广告,很烦人.开发的网站,上传到了阿里云 oss,设置了域名解析,但是在家里晚上访问的时候,总会在页面添加一个广告,导致页面卡主,一开始以为是路由器的问题,以 ...

  10. Sql Server Report Service 的部署问题

    近期在研究SSRS部署问题,因为以前也用到过SSRS报表,但当时开发的报表是有专门的集成系统的,不需要我自己去部署,所以对这一块的部署也不熟悉,我记得当时我是直接开发出一个SSRS 报表,然后会通过自 ...