• 认识border

      /*  border就是边框 
            三个要素：粗细、线型、颜色*/
           /* 颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框 */

    1. <style>
    2.         .box{
    3.             width: 300px;
    4.             height: 100px;
    5.             
    6.         }
    7.        /* solid实线 */
    8.         .b1{border: 10px solid blueviolet;}
    9.           /* dotted点虚线 */
    10.         .b2{border: 10px dotted blueviolet;}
    11.          /* dashed矩形虚线 */
    12.         .b3{border: 10px dashed blueviolet;}
    13.         /* double内外双实线 */
    14.         .b4{border: 10px double blueviolet;}
    15.          /* groove沟槽状边框 */
    16.         .b5{border: 50px groove blueviolet;}
    17.         /* inset3D凹边 */
    18.         .b6{border: 50px inset blueviolet;}
    19.          /* outset3D凸边 */
    20.         .b6{border: 50px outset blueviolet;}
    21.     </style>
    22. </head>
    23. <body>
    24.    <div class="box" b1></div> 
    25.    <div class="box" b2></div> 
    26.    <div class="box" b3></div> 
    27.    <div class="box" b4></div> 
    28.    <div class="box" b5></div> 
    29.    <div class="box" b6></div> 
    30.    <div class="box" b7></div>
    31. </body>

    效果图：

     

      /* border是一个大综合属性，能够被拆开，有两大种拆开的方式 */

                /* 1） 按3要素:border-width、border-style、border-color */

    /* 2） 按方向：border-top、border-right、border-bottom、border-left */

                /* 边框三要素   按三要素border-width  border-style  border-color*/

    把边框border按3要素：

    style样式：

    如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序，如下所示：

    border-width：10上下 20 左右

    1.  <style>
    2.         .box{
    3.             width: 300px;
    4.             height: 300px;
    5.             /* 按3要素拆开: */
    6.             border-width: 10px 20px;
    7.             border-style: solid dashed dotted;
    8.             border-color: yellow yellowgreen pink skyblue;
    9.         }
    10.     </style>

    body文本：

    1. <body>
    2.     <div class="box"></div>
    3. </body>

    预览效果图：

    把边框border按方向来拆开

    style样式

    1.  <style>
    2.         .box{
    3.             width: 300px;
    4.             height: 300px;
    5.  /* 按方向来拆开 */
    6.              border-top: 30px solid red;
    7.             border-right: 30px solid green;
    8.             border-bottom: 30px solid blue;
    9.             border-left: 30px solid yellow;
    10.         }
    11.    </style>

     body文本如上同

    预览效果图：

    把边框border按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：

         /* 边框按方向还能再拆一层，把每个方向，按照3要素写 */
               

    1.      <style>
    2.         .box{
    3.             width: 300px;
    4.             height: 300px;       
    5.             border-top-width: 30px;
    6.             border-top-style: solid;
    7.             border-top-color: red;
    8.             border-right-width: 30px;
    9.             border-right-style: solid;
    10.             border-right-color: green;
    11.             border-bottom-width: 30px;
    12.             border-bottom-style: solid;
    13.             border-bottom-color: blue;
    14.             border-left-width: 30px;
    15.             border-left-style: solid;
    16.             border-left-color: yellow;
    17. }
    18. </style>
    19. </head>
    20. <body>
    21.     <div class="box"></div>
    22. </body>

    效果图同上

    border可以没有

    第一种：4个边都没有边框 （border: none;）

    1. <style>
    2.         .box{
    3.             width: 300px;
    4.             height: 300px;
    5.             background-color: green;
    6.             /* 4个边都没有边框 */
    7.             border: none;
    8.         }
    9.     </style>
    10. </head>
    11. <body>
    12.     <div class="box"></div>
    13. </body>

    效果预览图

     

    第二种： 某一个边没有边框（border-left: none;）

    1. <style>
    2.         .box{
    3.             width: 300px;
    4.             height: 300px;
    5.             background-color: pink;
    6.              border-top-style: solid;
    7.             border-top-color: red;
    8.             border-right-style: solid;
    9.             border-right-color: green;
    10.             border-bottom-style: solid;
    11.             border-bottom-color: blue;
    12.              border-left: none;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <div class="box"></div>
    18. </body>

    预览效果图

     border可以透明 

    1.  <style>
    2.       .box{
    3.         width: 0px;
    4.         height: 0px;
    5.         border-top: 200px solid transparent;
    6.         border-right: 200px solid  yellow;
    7.         border-bottom: 200px solid transparent;
    8.         border-left: 200px solid transparent;
    9.       }  
    10.     </style>
    11. </head>
    12. <body>
    13.     <div class="box"></div>
    14. </body>

    预览效果图

     outline轮廓线

     outline轮廓线 在边框线的外面，它和盒模型没有任何关系。

            轮廓线不占据页面宽度。

    1.  <style>
    2.  .txt{
    3.             width: 300px;
    4.             height: 26px;
    5.             line-height: 26px;
    6.             border: 1px solid pink;
    7.             /*  轮廓线 */
    8.             /* 去除input文本框的轮廓线：outline: none; */
    9.             outline: none;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.     <input type="text" name="" id="" class="txt">
    15. </body>

    预览效果图

     把上面的 outline: none;换成outline: 20px solid orange;（轮廓线不占据页面宽度。）

    预览效果图

    所以，我们在实际项目中编写页面的时候，

                我们通常使用outline轮廓线去查看当前某个区块在页面中的位置。

     

  • 相关阅读:
    MySQL之JDBC编程
    Android Accessibility无障碍服务安全性浅析
    基于Qt4开发曲线绘制交互软件Plotter
    2023第六届中国国际眼科医学技术推广大会/山东视力康复展
    心得两则
    梯度下降法求解BP神经网络的简单Demo
    react路由基础理解
    滑动平均窗口的定义，优点，缺点，以及目前的应用！！
    Python 数据分析学习路线
    TensorFlow学习（3）初始化&非饱和激活函数&批量归一化&梯度剪裁&迁移学习&优化器
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/125506999