web基础

web全栈（2019.11.2-2019.11.3）
一、渐变区域
background: linear-gradient(旋转角度（deg）, color1, color2, …);
注：
1.颜色默认从上到下，从左到右
2.每个颜色区域依据颜色个数平分整体宽度（/长度）
3.角度12点钟方向为0度,顺时针度数依次增加
例：

 div{
            margin-left: 200px;
            width:300px;
            height:200px;
            background:linear-gradient(180deg,yellow,green,red);
        }

效果为：

特殊地：渐变线

 div{
            margin-left: 200px;
            width:300px;
            height:1px;
            background:linear-gradient(90deg,yellow,green,red);
        }

效果为：

二、after,before伪元素
1.after 在该元素的内容之前插入新内容；
before 在该元素的内容之后插入新内容；
2.两种写法：单冒号和双冒号；
3.与content: " ";联用；
例：

/*在适用clear的元素的内容前清除浮动*/
.clearfix:before{
   content:"";
   clear:both;
}

同理：

/*在适用table的元素的内容后显示table*/
.table::after{
   content:"";
   display:table;
}

三、下图效果的实现

1.先实现如图效果（代码略)

2.在左部分元素内容之前插入所需要的白色三角区域，代码如下：

.price .price-ms::before{
    content: "";
    width:0;
    height:0;
    border-top:solid 22px transparent;
    border-right:solid 8px white;
    border-bottom:solid 0 transparent;
    border-left:solid 0 transparent;
    position: absolute;
    top: 0;
    left: 82px;
}