当前位置:首页 > 学无止境 > web前端>正文

css3渐变属性(gradient)详细使用方法与代码

2020-11-12 23:08:56 分类: web前端 阅读(1740) 评论(12)

时至今日html5 css3已经很成熟了,今天小郭就来分享用CSS3实现div背景颜色渐变,本文整理了常用的颜色渐变模式,包括线性渐变(linear-gradient)、径向渐变(radial-gradient),我们就通过示例代码一起来学习一下吧。


一、线性渐变:linear-gradient


语法:

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner] ,]? <color-start>[, <color-end>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-start|end> = <color>[ <length>|<percentage>]?

下面看下各个参数的代表什么:


<angle>:用角度值指定渐变的方向(或角度)。

to left:设置渐变为从右到左。相当于: 270deg

to right:设置渐变从左到右。相当于: 90deg

to top:设置渐变从下到上。相当于: 0deg

to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。

<color-start|end> 用于指定渐变的起止颜色:

<color>:指定颜色。

<length>:用长度值指定起止色位置。不允许负值

<percentage>:用百分比指定起止色位置。


示例代码:

div {  
    width: 200px;  
    height: 100px;  
    margin: 10px 5px;  
    border: 1px solid #ddd000;  
}  
#LinearStartToEnd {  
  float:left;  
  background: linear-gradient(#ff0000, #00ff00);  
}  
#LinearPercentage {  
  float:left;  
  background: linear-gradient(#0000ff, #ff0000 52%, #00ff00);  
}  
#LinearAnglePercentage {  
  float:left;  
  background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);  
}  
#LinearAngle {  
  float:left;  
  background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);  
}  
#LinearTopRight {  
  float:left;  
  background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);  
}


效果如下:

css3渐变属性(gradient)详细使用方法与代码


二、径向渐变:radial-gradient


语法:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

具体的参数就不一一列举了,下面直接看代码体验下

示例代码:

#RadialCenterCircle {  
  float:left;  
    background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);  
}  
#RadialClosestSide {  
  float:left;  
    background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);  
}  
#RadialFarthestSide {  
  float:left;  
    background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);  
}  
#RadialRightTop {  
  float:left;  
    background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00);  
}  
#RadialRadiusCenter {  
  float:left;  
    background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);  
}  
#RadialGroup {  
  float:left;  
    background:  
        radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),  
        radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);  
}

效果如下:

image.png


以上就是小郭整理的css3渐变的使用方法与具体代码了,希望可以帮助有需要的朋友,更多建站教程欢迎加入建站交流q群:30051275

标签: CSS3 linear-gradient