首页 > 代码库 > gradient渐变
gradient渐变
linear-gradient: (线性渐变) 创建遮罩图像。
radial-gradient: (径向渐变) 创建遮罩图像。
repeating-linear-gradient: 重复的(线性渐变) 创建背遮罩像。
repeating-radial-gradient: 重复的(径向渐变) 创建遮罩图像。
linear-gradient: (线性渐变)
backgrond:linear-gradient(30deg, red 10%, green 100%)
解释
backgrond:linear-gradient(角度,颜色 位置,颜色 位置,+)
角度,点(渐变的颜色和位置)
起点:从什么方向开始渐变(顺时针)
关键词:
to left: 设置渐变为从右到左。相当于: 270deg
to right: 设置渐变从左到右。 相当于: 90deg
to top: 设置渐变从下到上。 相当于: 0deg
to bottom(默认):设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。
对角渐变 to top left | to top right | to bottom right | to bottom left
角度:从什么角度开始渐变,单位(deg)
点:渐变点的颜色和位置 颜色 : 位置:%|px
如:red 50%, blue 100%(红色从50%渐变到100%为蓝色)
用法:
带图片和透明度的渐变
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),url(abc.jpg);
兼容:
-webkit-linear-gradient()
-webkit-
-moz-
IE低版本渐变(滤镜):
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘,endColorstr=‘#ff0000‘,GradientType=‘1‘);
repeating-linear-gradient () 线性渐变重复平铺
repeating-linear-gradient(30deg, red 10%, green 10%) 剩余部分会自动平铺
radial-gradient径向渐变
radial-gradient( shape [size ] at[position ],color 位置,color 位置,+)
radial-gradient(形状 半径 半径 at 圆心x坐标 圆心y坐标,颜色 位置,+)
shape size: 半径 圆形的半径圆只有一个值,椭圆有两个值,px | 关键词
关键词:
closest-side: 圆心到最近的边
closest-corner: 圆心到最近的角
farthest-side: 圆心到离圆心最远的边
farthest-corner(默认): 圆心到离圆心最远的角
position 确定圆心的位置,X坐标,Y纵坐标;如果只提供一个,第二值默认为50%,即center
值: 关键词 px % X
关键词 :
left:左 center:中 right:右 Y关键词 :top:上 center:中 bottom:下
radial-gradient(ellipse 100% 100% at 300px 300px, #f00 10%, #ff0 20%, #080 100%)
repeating-radial-gradient () 线性渐变重复平铺
用于平铺
gradient渐变