css小样式

知识点：

 1 定位position , 在父元素相对定位的基础上对子元素绝对定位

 2 border-radius: 圆角

 3 border设定

 4 box-sizing 和 -webkit-border-radius ，border-radius和-webkit-box-sizing的双设定

 5 padding

 父元素

{
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #6d6d6d;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

 

 子元素

       {
            position: absolute;
            top: -11px;
            left: 20px;
            padding: 0 20px;
            background: #fff;
        }

 

 实现效果：

                

 

 

知识点：

 1  border + padding+ background+color 小样式

 .xxx{
    background-color: rgba(78,132,254,.1);
    height: 30px;
    position: relative;
    padding-left: 12px;
    font-size: 14px;
    line-height: 30px;
    color: #666;
    margin: 0;
    border-left: 4px solid #4e84fe;
    text-align: left;
  }

 实现效果：