CSS 图像高级 CSS 渐变

最新推荐文章于 2023-11-10 23:10:08 发布

weixin_30509393

最新推荐文章于 2023-11-10 23:10:08 发布

阅读量219

点赞数

原文链接：http://www.cnblogs.com/lszw/p/10768763.html

版权

CSS 渐变

CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型。

使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。用渐变代替图片，可以加快页面的载入时间、减小带宽占用。

同时，因为渐变是由浏览器直接生成的，渐变在页面缩放时的效果比图片更好，可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变：

线性渐变 (linear)，通过 linear-gradient 函数定义
径向渐变 (radial)，通过 radial-gradient 函数定义

线性渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

linear-gradient函数的语法：

 
         linear-gradient (方向或角度,颜色 
         1 
         ,颜色 
         2 
         ,...颜色n,背景图片)

其中背景图片是可选的。

下面的代码演示了线性渐变的用法。

<!DOCTYPE html>

< html >

< head >

< title >线性渐变</ title >

< style type = "text/css" >

body{

padding:20px;

}

div{color:#fff;}

div.one{

width:100%;

height:150px;

border:1px solid #000;

background: linear-gradient(to bottom, blue, white);

}

div.two{

width:100%;

height:150px;

border:1px solid #000;

background: linear-gradient(to right, blue, white);

}

div.three{

width:100%;

height:150px;

border:1px solid #000;

background: linear-gradient(30deg, #000, #ff0000);

}

div.four{

width:100%;

height:150px;

border:1px solid #000;

background: linear-gradient(to right, red, orange, yellow, green,white, blue);

}

div.five{

color:#000;

width:418px;

height:150px;

border:1px solid #000;

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),

url(https://www.liyongzhen.com/docs/images/css-flower.png);

}

</ style >

</ head >

< body >

< h1 >软件开发，成就梦想</ h1 >

< h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 >

< div class = "one" >从上到下</ div >

< div class = "two" >从左到右</ div >

< div class = "three" >角度 30度</ div >

< div class = "four" >色标</ div >

< div class = "five" >背景图片渐变</ div >

</ body >

</ html >

计算结果：

色标，在渐变中，可以使用两种以上的颜色，这就是色标。

渐变加透明，效果更好，透明是通过背景颜色来实现，其中0是不透明，1是100%透明。

转载于:https://www.cnblogs.com/lszw/p/10768763.html

weixin_30509393

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫