w3cplus中说：渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中，可以指定多个中间颜色值，这个值称为色标。每个色标包含一种颜色和一个位置，浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变。
【语法】
angle：用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值。
color-stop： 用于指定渐变的起止颜色：
color：指定颜色。
length：用长度值指定起止色位置。不允许负值
percentage：用百分比指定起止色位置
【方法】
1.最常用的方法是在背景中使用：
background: linear-gradient(to bottom, #FFF 0%, #000 100%);
从上到下，从白渐变到黑的背景
2.重合的渐变线
渐变线上可以添加多个渐变节点，并且这些渐变节点是允许重合的，那么当渐变节点重合时，会发生什么状况呢？
回答： 会形成清晰的分界
background-image:linear-gradient(to bottom, #36C 0%, #36C 50%, #F00 50%, #F00 100%)
3.节点位置会自动分配
linear-gradient(100deg, red, orange, yellow 30%, red, black)
由于0% ~ 30%之间的red、orange没有指定位置参数，因此，red和orange会平均分配30%的长度空间，即15%的段长度，因此相当于red 0%和orange 15%
由于30% ~ 100%之间的red、black没有指定位置参数，因此，red和black会平均分配70%的长度空间，即35%的段长度，因此加上位置偏移量30%，相当于red 65%和black 100%
相当于
linear-gradient(100deg, red 0%, orange 15%, yellow 30%, red 65%, black 100%)
【举例】
div:nth-child(1){
background:linear-gradient(#ea2000, #e5a399);
}
div:nth-child(2){
background: linear-gradient(45deg, #ea2000 20%, #e5632d 50%, #e5b12d 80%);
}
div:nth-child(3){
background:linear-gradient(to top right, #000, #416796 50%, #b5cae4);
}
div:nth-child(4){
background:linear-gradient(45deg, #2989d8 30%, #7db9e8 31%, #7db9e8 58%, #2989d8 59%);
}
【对话框】
<div class="content">
<p class="talk">对话内容</p>
</div>
.content{
margin-left:70px
}
.talk{
display: inline-block;
max-width: 80%;
border:1px solid #ddd;
border-radius: 3px;
padding:6px 10px;
font-size: 14px;
background-color: #fff;
position: relative;
}
.talk::before{
content:'';
position: absolute;
width: 6px;height: 6px;
background:
linear-gradient(to top, #ddd, #ddd) no-repeat,
linear-gradient(to right, #ddd, #ddd) no-repeat,
linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;
background-size: 6px 1px, 1px 6px, 6px 6px;
transform: rotate(-45deg);
left:-4px; top:13px;
}
【纯CSS的加号和减号】
.btn{
display: inline-block;
background: #f0f0f0 no-repeat center;
border:1px solid #d0d0d0;
width:24px;height:24px;
border-radius: 2px;
box-shadow: 0 1px rgba(100,100,100,.1);
color:#666;
transition: color .2s, bacckground-color .2s;
}
.btn_plus{
background-image:
linear-gradient(to top, currentColor, currentColor),
linear-gradient(to top, currentColor, currentColor);
background-size: 10px 2px, 2px 10px;
}
.btn_minus{
background-image:
linear-gradient(to top, currentColor, currentColor);
background-size: 10px 2px;
}
【进度滚动条】
<div><span></span></div>
div{width:300px;height:30px;}
div span{
display: inline-block;
width: 100%;
height: 100%;
background:linear-gradient(45deg, #2989d8 30%, #7db9e8 31%, #7db9e8 58%, #2989d8 59%);
background-size: 60px 30px;
text-align: center;
color:#fff;
animation: load 3s ease-in;
}
@keyframes load{
0%{
width: 0%;
}
100%{
width: 100%;
}
}
网友评论