CSS3线性渐变与径向渐变
来源:互联网 发布:directx9安装需要网络 编辑:程序博客网 时间:2024/05/17 04:07
兼容性
IE9及之前版本不兼容
线性渐变
background:linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
其中,angle是角度,以逆时针方向计算
side-or-corner的取值有left,right,top,bottom,(对应270deg,90,0,180),bottom为默认值。
color-stop指渐变的起止颜色,属性有length,指定起止色位置,不允许负值。percentage,指定起止色百分比位置。
颜色可以使用rgba()或hsla()。
rgba() 红、绿、蓝、透明度,透明度Alpha是0-1之间的浮点数
hlsa()
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:Saturation(饱和度)。取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%
A:Alpha透明度。取值0~1之间。
transparent指全透明色,可以用在任何color。
径向渐变
background: radial-gradient()
默认从center开始,默认形状为 ellipse椭圆形,可以是circle圆形。
应用
线性渐变可以生成棋盘图案、条纹背景
径向渐变可以生成波点图案
角向渐变
也称圆锥渐变,尚没有浏览器支持。生成方式:所有色标的颜色变化是由一条射线绕着端点旋转来推进的。
阅读全文
0 0
- CSS3线性渐变与径向渐变
- CSS3-颜色渐变--线性渐变+径向渐变
- css3渐变、线性渐变和径向渐变
- css3 线性渐变和径向渐变样式
- CSS3 Gradient 线性渐变 径向渐变
- CSS3 Gradient 线性渐变/径向渐变
- css3 线性渐变和径向渐变
- CSS3的线性渐变 和 径向渐变。
- CSS3之渐变(线性渐变,径向渐变)
- 渐变:线性渐变、径向渐变
- 详解CSS3渐变(线性和径向)
- CSS3重复渐变(线性和径向渐变)
- CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)
- CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)
- CSS3线性渐变 径向渐变 background linear-gradient radial-gradient
- css3径向渐变
- CSS3 渐变 线性渐变
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)。
- Android Picasso实现圆形图片和圆角图片
- codeforces 812b Sagheer, the Hausmeister
- Linux系统内存管理
- 【脚本语言系列】关于PythonWeb服务器Bottle,你需要知道的事
- grep、sed、awk命令使用参数说明
- CSS3线性渐变与径向渐变
- BZOJ 2428 [HAOI2006]均分数据 模拟退火
- bash脚本基础(二)
- Flask成长笔记--依赖包操作
- Leetcode 332 Reconstruct Itinerary
- vlc for android 完全编译
- dup/dup2/dup3(输入文件描述符重定向)
- 【脚本语言系列】关于PythonWeb服务器Flask,你需要知道的事
- 60. Permutation Sequence