开发指南118-背景渐变特效
上章讲了标签字体,本章讲标题栏背景特效:渐变
渐变的核心是使用
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
direction
:定义渐变线的方向。可以是角度值(如45deg
)或关键字(如to right
、to bottom
等)。如果不指定方向,默认从上到下渐变。color-stop
:定义渐变中的颜色停止点。每个颜色停止点包括一个颜色和一个位置(可选)。位置可以是百分比或长度值,表示颜色在渐变线上的位置。如果省略位置,颜色将均匀分布在渐变线上。
平台样例:
background: linear-gradient( 180deg, rgba(243,246,255,0.45) 4%, rgba(255,255,255,0.45) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid rgba(0,0,0,0.11);