前端3+1（Day6）

前端3+1(Day6)

label标签有什么作用

的作用，用于增加用户体验

/文本内容/

    <input type="checkbox" id="text">
    <label for="text">这是文本框</label>

    <input type="button" id="btn">
    <label for="btn">Button</label>

    <style>
        input[type='button'] {
            display: none;
        }

        label {
            display: inline-block;
            padding: 10px 20px;
            background: #456;
            color: #fff;
            cursor: pointer;
            box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .3);
            border-radius: 2px;
        }
    </style>

1. label与input的button属性相结合，可以实现button没有的一些样式问题
2. label与input的checkbox，增强用户体验

用css实现一个三角形

原理：

不设置盒子的宽高，直接设置border的属性，包括，大小，线子样式,颜色，

<sytle>
    div{
    width:0;
    height:0
    border-left:50px solid red;
    border-right:50px solid blue;
    border-top:50px solid black;
    border-bottom:50px solid yellow;
    }
</style>