gradient渐变

Posted 2020-09-16

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 () 线性渐变重复平铺

用于平铺