CSS Border Bottom常用属性详解

原文链接：https://www.python100.com/html/90865.html

一、border-bottom的基本使用

   border-bottom: 单位 边框样式 颜色;

border-bottom是css中用来设置底部边框的属性。

border-bottom的属性值包括三个，分别是：边框宽度（单位），边框样式（solid、dotted、dashed等）和边框颜色（十六进制代码或rgb颜色值）。

以下是一个简单的应用实例：

    <div style="border-bottom: 2px solid #F08080; padding-bottom: 10px;">
        <p>这是一段有底部边框的文字信息。</p>
    </div>

效果如下图所示：

二、border-bottom常用属性介绍

1. border-bottom-style

   border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

border-bottom-style是用来设置边框样式的属性。

取值说明：

  • none：没有边框（默认）
  • hidden：同none，但是打印的时候依然会有边框。
  • dotted：点线边框
  • dashed：虚线边框
  • solid：实线边框（默认值）
  • double：双线边框
  • groove：3D向内凹陷边框
  • ridge：3D向外凸出边框
  • inset：3D向内凹陷边框
  • outset：3D向外凸出边框

2. border-bottom-width

   border-bottom-width: 1px|medium|thin|thick;

border-bottom-width是用来设置边框宽度的属性。

取值说明：

  • 1px：像素值
  • medium：默认宽度
  • thin：细线宽度
  • thick：粗线宽度

3. border-bottom-color

   border-bottom-color: color|transparent;

border-bottom-color是用来设置边框颜色的属性。

取值说明：

  • color：常用的颜色值或RGB颜色值
  • transparent：透明，不显示颜色

4. border-bottom-image

    border-bottom-image: url("border.png")|none|initial|inherit;

border-bottom-image是用来设置边框图片的属性。

取值说明：

  • url("border.png")：指定图片的路径
  • none：无图片，默认值
  • initial：默认值
  • inherit：继承父元素的属性

    三、其他Tips

    1. 边框不影响元素大小

    注意：设置border-bottom-style并不会影响元素的大小，仅仅会在底部绘制出一条边框线并呈现所设置的样式。

    2. 边框可以设置为虚线、点线、实线和双线等

    border-bottom-style属性可以设置为虚线、点线、实线和双线等样式。

    3. 禁止底部折叠

    虽然默认情况下，不同元素之间的底部边框会折叠在一起，但是我们可以加入一个 "border-collapse: separate;" 的属性来避免这种情况。

    以下是一个具有明显折叠的底部边框：

       <div style="border-bottom: 1px solid black; height: 50px;">
        <p>这是第一个div</p>
    </div>
    <div style="border-bottom: 1px solid black; height: 50px;">
        <p>这是第二个div</p>
    </div>

    效果如图所示：

  •  添加border-collapse属性后再试一次：

        <div style="border-bottom: 1px solid black; height: 50px; border-collapse: separate;">
        <p>这是第一个div</p>
    </div>
    <div style="border-bottom: 1px solid black; height: 50px; border-collapse: separate;">
        <p>这是第二个div</p>
    </div>

    　　

     

    4. 底部边框圆角效果

    我们可以使用border-bottom-left-radius（设置左下角的圆角效果）和border-bottom-right-radius（设置右下角的圆角效果）来实现底部边框的圆角效果。

    以下是一个简单的应用实例：

    <div style="border-bottom: 5px solid #ccc; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: 50px;">
        <p>这是一段带有圆角底部边框的文字信息。</p>
    </div>

    　　效果如图所示：

  • 总结

    css的border-bottom属性是用来设置元素底部边框的。border-bottom-style、border-bottom-width和border-bottom-color是设置边框样式、宽度和颜色的常用属性。我们还可以利用border-bottom-image来设置边框的图片属性。在实际应用中，我们可以通过border-bottom-style属性设置为虚线、点线、实线和双线等样式，也可以使用border-bottom-left-radius和border-bottom-right-radius来实现底部边框的圆角效果。同时，我们可以注意到边框不影响元素的大小，并且要避免边框折叠的情况，我们可以在父元素中使用border-collapse属性来解决问题。

     

     

     

 

posted @ 2024-02-22 18:35  yinghualeihenmei  阅读(1087)  评论(0)  编辑  收藏  举报