最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

cssborder-bottom用法详解

来源:懂视网 责编:小采 时间:2020-11-27 18:50:50
文档

cssborder-bottom用法详解

cssborder-bottom用法详解:border-bottom(指定下边线的样式、宽度及颜色)border-bottom: 值;border-bottom-style:值;border-bottom-color: 值;border-bottom-width:值;如:border-bottom: solid 1px #ffff00;border-bottom-style:
推荐度:
导读cssborder-bottom用法详解:border-bottom(指定下边线的样式、宽度及颜色)border-bottom: 值;border-bottom-style:值;border-bottom-color: 值;border-bottom-width:值;如:border-bottom: solid 1px #ffff00;border-bottom-style:

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-color:下边线的颜色

  • border-bottom-style:下边线的样式

  • border-bottom-width:下边线的宽度

  • border-bottom的值及其说明
    属性说明
    border-bottomsolid下边线为实线
    其他的值还有: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>
    
    <p class="sample1">sample1:下边线 solid 1px #ffff00</p>
    
    <p class="sample2">sample2:下边线 groove 10px #00ff00</p>
    
    <p class="sample3">sample3:分别指定下边线的样式、宽度、颜色 </p>
    
    </body>
    
    </html>

    文档

    cssborder-bottom用法详解

    cssborder-bottom用法详解:border-bottom(指定下边线的样式、宽度及颜色)border-bottom: 值;border-bottom-style:值;border-bottom-color: 值;border-bottom-width:值;如:border-bottom: solid 1px #ffff00;border-bottom-style:
    推荐度:
    标签: 设置 使用 用法
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top