认识border

最新推荐文章于 2022-10-26 20:31:02 发布

正在修炼web的小芮

最新推荐文章于 2022-10-26 20:31:02 发布

阅读量1.1k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_71814235/article/details/125506999

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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

<style>
        .box{
            width: 300px;
            height: 100px;
            
        }
       /* solid实线 */
        .b1{border: 10px solid blueviolet;}
          /* dotted点虚线 */
        .b2{border: 10px dotted blueviolet;}
         /* dashed矩形虚线 */
        .b3{border: 10px dashed blueviolet;}
        /* double内外双实线 */
        .b4{border: 10px double blueviolet;}
         /* groove沟槽状边框 */
        .b5{border: 50px groove blueviolet;}
        /* inset3D凹边 */
        .b6{border: 50px inset blueviolet;}
         /* outset3D凸边 */
        .b6{border: 50px outset blueviolet;}
    </style>
</head>
<body>
   <div class="box" b1></div> 
   <div class="box" b2></div> 
   <div class="box" b3></div> 
   <div class="box" b4></div> 
   <div class="box" b5></div> 
   <div class="box" b6></div> 
   <div class="box" b7></div>
</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 左右

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

body文本：

<body>
    <div class="box"></div>
</body>

预览效果图：

把边框border按方向来拆开

style样式

 <style>
        .box{
            width: 300px;
            height: 300px;
 /* 按方向来拆开 */
             border-top: 30px solid red;
            border-right: 30px solid green;
            border-bottom: 30px solid blue;
            border-left: 30px solid yellow;
        }
   </style>

body文本如上同

预览效果图：

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

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

     <style>
        .box{
            width: 300px;
            height: 300px;       
            border-top-width: 30px;
            border-top-style: solid;
            border-top-color: red;
            border-right-width: 30px;
            border-right-style: solid;
            border-right-color: green;
            border-bottom-width: 30px;
            border-bottom-style: solid;
            border-bottom-color: blue;
            border-left-width: 30px;
            border-left-style: solid;
            border-left-color: yellow;
}
</style>
</head>
<body>
    <div class="box"></div>
</body>

效果图同上

border可以没有

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

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: green;
            /* 4个边都没有边框 */
            border: none;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

效果预览图

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

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;
             border-top-style: solid;
            border-top-color: red;
            border-right-style: solid;
            border-right-color: green;
            border-bottom-style: solid;
            border-bottom-color: blue;
             border-left: none;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

预览效果图

border可以透明

 <style>
      .box{
        width: 0px;
        height: 0px;
        border-top: 200px solid transparent;
        border-right: 200px solid  yellow;
        border-bottom: 200px solid transparent;
        border-left: 200px solid transparent;
      }  
    </style>
</head>
<body>
    <div class="box"></div>
</body>

预览效果图

outline轮廓线

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

轮廓线不占据页面宽度。

 <style>
 .txt{
            width: 300px;
            height: 26px;
            line-height: 26px;
            border: 1px solid pink;
            /*  轮廓线 */
            /* 去除input文本框的轮廓线：outline: none; */
            outline: none;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="" class="txt">
</body>

预览效果图