HTML筑基知识点五

边框案例

 .box1{

            width: 0px;

            height: 0px;

            border: green solid 100px;

            border-color: blue pink purple cadetblue;

        }

  用边框实现三角形的规律: 盒子大小宽高为0。

最后页面呈现的画面是这样的：

 接下里我们做另外一种案例效果

.box2{

            width: 100px;

            height: 100px;

            border: 100px solid palevioletred;

            border-color: blue pink purple cadetblue; 

这就是我要说的只是在宽高上做了改变，最后变成了梯形 。

那么如果我专门就出一个三角或者梯形该怎么做呢，如下 

.box3{

            width: 100px;

            height: 100px;

            border: 100px solid greenyellow;

            border-top: none;

            border-left: 100px solid transparent;

            border-right: 100px solid transparent;

        } 

这边我想要一个下方的三角形，所以我隐藏了对边，然后设置左右两边为透明色。 

然后是三角形

.box4{

            width: 0px;

            height: 0px;

            border: 100px solid purple;

            border-right: none;

            border-top: 100px solid transparent;

            border-bottom: 100px solid transparent;

        }

  

一定注意盒子的宽高 

围绕内容和内填充的曲线

---

 1.border-width:边框的宽度

        单位：像素

        注意：只写一个border-width设置不上边框的宽的，得写上边框的线型

        2.border-style：边框的线型

          1.solid 单实线

          2.double 双实线

          3.dashed 条状虚线

          4.dotted 点状边框

          5.none  没有边框

        3.border-color:边框的颜色

          1.关键词

          2.十六进制色值

          3.rgb()

          4.rgba()

          默认边框的颜色为元素本身的前景色

          4.复合写法

          例子：

          border-color: pink； 一个值：四个边框

          border-color: pink gold; 两个值：上下边框  左右边框

          border-color: pink gold greenyellow; 三个值：上边框 左右边框  下边框

          border-color: pink gold greenyellow purple;上边框 右边框 下边框 左边框(顺时针方向)

          border-width和border-style同样效果

        5.单独设置

        例子：

         /* 上边框 */

        border-top-width: 50px;

        border-top-style: solid;

        border-top-color: yellow;

         /* 下边框 */

        border-bottom-width: 50px;

        border-bottom-style: dashed;

        border-bottom-color: brown;

        单边框复合写法：

        border-left: 50px solid cyan;

        边框的宽度 边框的线型 边框的颜色

        6.边框的复合写法

        border:边框的宽度 边框的线型 边框的颜色

        border: 100px solid purple;

        7.去掉边框

        border:0;

        border:none;