渐变色在开发中是经常使用的,下面介绍了各个浏览器下的不同写法。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>linear-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
div {
width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
.test {
background: -moz-linear-gradient(#fff,#333);
background: -webkit-gradient(linear,center top,center bottom,from(#fff),to(#333));
background: -webkit-linear-gradient(#fff,#333);
background: -o-linear-gradient(#fff,#333);
background: -ms-linear-gradient(#fff,#333);
background: linear-gradient(#fff,#333);
}
.test2 {
background: -moz-linear-gradient(#000,#f00 50%,#090);
background: -webkit-gradient(linear,center top,center bottom,from(#000),color-stop(.5,#f00),to(#090));
background: -webkit-linear-gradient(#000,#f00 50%,#090);
background: -o-linear-gradient(#000,#f00 50%,#090);
background: -ms-linear-gradient(#000,#f00 50%,#090);
background: linear-gradient(#000,#f00 50%,#090);
}
.test3 {
background: -moz-linear-gradient(left center,#000 20%,#f00 50%,#090 80%);
background: -webkit-gradient(linear,left center,right center,color-stop(.2,#000),color-stop(.5,#f00),color-stop(.8,#090));
background: -webkit-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
background: -o-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
background: -ms-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
background: linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
}
.test4 {
background: -moz-linear-gradient(45deg,#000,#f00 50%,#090);
background: -webkit-gradient(linear,left bottom,right top,from(#000),color-stop(.5,#f00),to(#090));
background: -webkit-linear-gradient(45deg,#000,#f00 50%,#090);
background: -o-linear-gradient(45deg,#000,#f00 50%,#090);
background: -ms-linear-gradient(45deg,#000,#f00 50%,#090);
background: linear-gradient(45deg,#000,#f00 50%,#090);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>
- 浏览: 22969 次
- 性别:
- 来自: 西安
文章分类
最新评论
发表评论
-
transform的语法
2014-05-28 08:49 489Transform字面上就是变形,改变的意思。在CSS3中t ... -
彩色图片变灰色
2014-05-22 19:18 329filter:progid:DXImageTransform. ... -
ie6常见css bug
2014-05-19 18:16 309相信每个前端人都会有同感——ie6这东西真是万恶啊!就连ms ... -
RGBA
2014-05-15 11:02 440为颜色加透明度值:rgba值,“a”在该属性中代表:alph ... -
background-size背景图片
2014-05-15 10:57 323background-size的特定值: cover: 保 ... -
CSS网页布局时常犯的10个小错误
2014-05-15 10:47 321[From:网页教学网]CSS网页 ... -
IE6下解决text-align:center
2014-05-13 13:28 850Html代码 <style ty ... -
ie6,ie7,ie8 css bug兼容解决记录
2014-05-11 16:43 445断断续续的在开发过程中收集了好多的bu ... -
浏览器css bug及bug解决方法
2014-05-11 16:27 307Bugs及解决方案列表(以下实例默认运行环境都为Standa ... -
css height:auto;不起作用
2014-05-09 13:35 712overflow:hidden;/*加上它,即可*/ -
border-radius 圆角边框
2014-05-09 13:32 403在css3.0中,又添加了一个新的属性bord ... -
前端CSS规范整理
2014-05-07 10:16 502一、文件规范 1、文件 ... -
CSS兼容性常见问题
2014-05-06 21:05 320DIV+CSS设计IE6、IE7、FF 兼容性 DI ... -
CSS技巧及常见问题列表
2014-05-06 20:57 4831、善用css缩写可以 ... -
reset.css
2014-05-05 09:03 416/**************************** ...
相关推荐
在CSS3中,渐变分为线性渐变(linear-gradient)和径向渐变(radial-gradient)。本文将重点探讨线性渐变的使用方法。 一、线性渐变的基本语法 线性渐变的基本语法可以表示为: ```css background: linear-gradient...
线性渐变(linear-gradient)是CSS3中一个强大的工具,能够帮助我们实现这一目标。本文将深入探讨如何利用linear-gradient为图片添加蒙层,并通过具体的代码示例进行详细讲解。 首先,线性渐变允许我们创建从一种...
在React Native中,实现图形效果如渐变可以借助第三方库,例如`react-native-linear-gradient`。这个库提供了对CSS线性渐变的兼容性,使得在React Native应用中创建动态且美观的背景或元素变得更加简单。 线性渐变...
线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90deg 径向渐变( radial-...
线性渐变(linear-gradient)是通过一条直线来实现颜色的过渡,这条线称为渐变线。在CSS3之前,渐变通常依赖于图像设计软件,这种方法不仅可扩展性差,而且会影响页面加载速度。CSS3引入的线性渐变解决了这些问题,...
安装 npm i react-linear-gradient-picker渐变选择器的使用 import React , { useState } from 'react' ;import { Panel as ColorPicker } from 'rc-color-picker' ;import { GradientPicker } from 'react-linear-...
CSS3中的`linear-gradient`是一个强大的工具,用于创建线性颜色渐变背景,它可以替代以往复杂的背景图片,实现更为灵活且响应式的网页设计。本文将深入探讨`linear-gradient`的工作原理,并通过实例展示其在不同场景...
比如,我们可以创建一个带有渐变色的边框,或者通过多个`linear-gradient`叠加实现多彩的边框。以下是一个例子: ```css .box { /* ...其他样式 */ border: none; background-image: linear-gradient(to right, ...
在CSS中,`repeating-linear-gradient`是一种创建可重复线性渐变的工具,它可以将一个简单的线性渐变在指定方向上无限重复,从而产生各种有趣的视觉效果,如条纹、格子或其他图案。这个功能对于网页设计,尤其是创建...
传统的实现方式是通过图片来实现+-按钮,而本文却将使用CSS3的linear-gradient线性渐变来实现购物车的加减操作。 要实现一个减号效果非常简单,例如要实现一个10px*2px的减号图形,则CSS: .minus { background-...
在CSS3中,我们可以使用`linear-gradient()`函数来定义渐变。基本语法如下: ```css background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ``` 这里的`direction`参数指定了渐变的方向...
在现代浏览器中,CSS3提供了线性渐变(linear-gradient)和径向渐变(radial-gradient)两种方式来创建渐变效果。然而,早期的IE浏览器,尤其是IE8及以下版本,不支持CSS3渐变,而是采用滤镜(filter)技术。`filter...
现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient...Firefox background: -moz-linear-gradient(top, #FF0000, #F9F900); 参数:top、bottom垂直,left、r
在现代CSS中,我们可以使用`linear-gradient`或`radial-gradient`来创建渐变。例如: ```css background: linear-gradient(to right, red, blue); ``` PostCSS Filter Gradient 插件会将这段代码转换为IE8-9支持的...