渐变色在开发中是经常使用的,下面介绍了各个浏览器下的不同写法。
<!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>
- 浏览: 20874 次
- 性别:
- 来自: 西安
文章分类
最新评论
linear-gradient渐变
- 博客分类:
- Css
发表评论
-
transform的语法
2014-05-28 08:49 454Transform字面上就是变形,改变的意思。在CSS3中t ... -
彩色图片变灰色
2014-05-22 19:18 304filter:progid:DXImageTransform. ... -
ie6常见css bug
2014-05-19 18:16 259相信每个前端人都会有同感——ie6这东西真是万恶啊!就连ms ... -
RGBA
2014-05-15 11:02 409为颜色加透明度值:rgba值,“a”在该属性中代表:alph ... -
background-size背景图片
2014-05-15 10:57 283background-size的特定值: cover: 保 ... -
CSS网页布局时常犯的10个小错误
2014-05-15 10:47 295[From:网页教学网]CSS网页 ... -
IE6下解决text-align:center
2014-05-13 13:28 815Html代码 <style ty ... -
ie6,ie7,ie8 css bug兼容解决记录
2014-05-11 16:43 422断断续续的在开发过程中收集了好多的bu ... -
浏览器css bug及bug解决方法
2014-05-11 16:27 281Bugs及解决方案列表(以下实例默认运行环境都为Standa ... -
css height:auto;不起作用
2014-05-09 13:35 618overflow:hidden;/*加上它,即可*/ -
border-radius 圆角边框
2014-05-09 13:32 374在css3.0中,又添加了一个新的属性bord ... -
前端CSS规范整理
2014-05-07 10:16 469一、文件规范 1、文件 ... -
CSS兼容性常见问题
2014-05-06 21:05 295DIV+CSS设计IE6、IE7、FF 兼容性 DI ... -
CSS技巧及常见问题列表
2014-05-06 20:57 4351、善用css缩写可以 ... -
reset.css
2014-05-05 09:03 381/**************************** ...
相关推荐
线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90deg 径向渐变( radial-...
安装 npm i react-linear-gradient-picker渐变选择器的使用 import React , { useState } from 'react' ;import { Panel as ColorPicker } from 'rc-color-picker' ;import { GradientPicker } from 'react-linear-...
1.linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果。 2.linear-gradient在不同内核下使用方式不同。 实用栗子(在Chrome下) 1.缺角效果 先看效果图 这是内容 .div1 { width: 100px; height: 40...
下面小编就为大家带来一篇深入剖析CSS中的线性渐变linear-gradient。小编觉得挺不错的,现在分享给大家,也给大家做个参考
CSS repeating-linear-gradient 方法 创造一个可重复的渐变。它接受和普通线性渐变相同的属性值并且表现也一致。 但它会自动在延伸的方向上重复 color stops。每段起始和结束的 color stop 之间是一个基本的...
所以用上个方法联想到了线性渐变(linear-gradient) CSS Code复制内容到剪贴板 .line li{ border: none; background-image: -webkit-linear-gradient(#222 50%,transparent 50%); background-i
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核...
现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient...Firefox background: -moz-linear-gradient(top, #FF0000, #F9F900); 参数:top、bottom垂直,left、r
传统的实现方式是通过图片来实现+-按钮,而本文却将使用CSS3的linear-gradient线性渐变来实现购物车的加减操作。 要实现一个减号效果非常简单,例如要实现一个10px*2px的减号图形,则CSS: .minus { background-...
react-native-linear-gradient包含css渐变支持
该组件正在使用 ,如果您不想使用expo,请随意分叉此repo并删除expo,然后使用代替,或者使用分叉的repo 演示版用法npm i react-native-svg-animated-linear-gradient --save npm i react-native-svg react-native ...
像刻度这种东西都是重复性的,说到重复我就想到了repeating-linear-gradient,看名字就能知道是重复线性渐变,它能更方便的实现隔行变色的功能,如果你想画一个背景,它是重复、隔行的,那么用它就没错了;...
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。线性渐变在Webkit下的应用 CSS Code复制内容到剪贴板 -webkit-linear-gradient( [ || ,]? , [, ]* )//最新发布书写语法 第...
React线性渐变按钮React线性渐变按钮组件安装 $ npm install react-linear-gradient-button用法 import React , { Component } from 'react' ;import ReactDOM from 'react-dom' ;import GradientButton from 'react...