CSS 图像高级 CSS 渐变
CSS 渐变
CSS 渐变是在 CSS3 Image Module 中新增长的 <image> 类型。css
使用 CSS 渐变能够在两种颜色间制造出平滑的渐变效果。用渐变代替图片，能够加快页面的载入时间、减少带宽占用。html
同时，由于渐变是由浏览器直接生成的，渐变在页面缩放时的效果比图片更好，能够更加灵活、便捷的调整页面布局。编程
浏览器支持两种类型的渐变：浏览器
- 线性渐变 (linear)，经过 linear-gradient 函数定义
- 径向渐变 (radial)，经过 radial-gradient 函数定义
线性渐变
linear-gradient() 函数用于建立一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。函数
linear-gradient函数的语法：布局
|
1
|
linear-gradient (方向或角度,颜色
1
,颜色
2
,...颜色n,背景图片)
|
其中背景图片是可选的。url
下面的代码演示了线性渐变的用法。spa
<!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)),
}
</
style
>
</
head
>
<
body
>
<
h1
>软件开发，成就梦想</
h1
>
<
div
class
=
"one"
>从上到下</
div
>
<
div
class
=
"two"
>从左到右</
div
>
<
div
class
=
"three"
>角度 30度</
div
>
<
div
class
=
"four"
>色标</
div
>
<
div
class
=
"five"
>背景图片渐变</
div
>
</
body
>
</
html
>
计算结果：code
色标，在渐变中，能够使用两种以上的颜色，这就是色标。htm
渐变加透明，效果更好，透明是经过背景颜色来实现，其中0是不透明，1是100%透明。
相关文章
- 1. CSS渐变
- 2. css渐变
- 3. css渐变色
- 4. css渐变/背景
- 5. CSS背景渐变
- 6. 渐变 CSS linear-gradient
- 7. css背景渐变
- 8. css动画渐变
- 9. css 渐变文字
- 10. css线性渐变
- 更多相关文章...
- • CSS 指南 - 网站建设指南
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。