`

linear-gradient渐变

    博客分类:
  • Css
 
阅读更多

渐变色在开发中是经常使用的,下面介绍了各个浏览器下的不同写法。

CSS3的linear-gradient()


<!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>
           

分享到:
评论

相关推荐

    CSS3,线性渐变(linear-gradient)的使用总结

    在CSS3中,渐变分为线性渐变(linear-gradient)和径向渐变(radial-gradient)。本文将重点探讨线性渐变的使用方法。 一、线性渐变的基本语法 线性渐变的基本语法可以表示为: ```css background: linear-gradient...

    linear-gradient给图片加蒙层方法

    线性渐变(linear-gradient)是CSS3中一个强大的工具,能够帮助我们实现这一目标。本文将深入探讨如何利用linear-gradient为图片添加蒙层,并通过具体的代码示例进行详细讲解。 首先,线性渐变允许我们创建从一种...

    reactnativelineargradient包含css渐变支持

    在React Native中,实现图形效果如渐变可以借助第三方库,例如`react-native-linear-gradient`。这个库提供了对CSS线性渐变的兼容性,使得在React Native应用中创建动态且美观的背景或元素变得更加简单。 线性渐变...

    CSS 实现渐变效果小结( linear-gradient线性渐变 和 radial-gradient径向渐变)

    线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90deg 径向渐变( radial-...

    深入剖析CSS中的线性渐变linear-gradient

    线性渐变(linear-gradient)是通过一条直线来实现颜色的过渡,这条线称为渐变线。在CSS3之前,渐变通常依赖于图像设计软件,这种方法不仅可扩展性差,而且会影响页面加载速度。CSS3引入的线性渐变解决了这些问题,...

    react-linear-gradient-picker:用 React 编写的线性渐变选择器

    安装 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的使用实例

    CSS3中的`linear-gradient`是一个强大的工具,用于创建线性颜色渐变背景,它可以替代以往复杂的背景图片,实现更为灵活且响应式的网页设计。本文将深入探讨`linear-gradient`的工作原理,并通过实例展示其在不同场景...

    利用CSS3的线性渐变linear-gradient制作边框的示例

    比如,我们可以创建一个带有渐变色的边框,或者通过多个`linear-gradient`叠加实现多彩的边框。以下是一个例子: ```css .box { /* ...其他样式 */ border: none; background-image: linear-gradient(to right, ...

    CSS学习笔记之可重复渐变(repeating-linear-gradient)

    在CSS中,`repeating-linear-gradient`是一种创建可重复线性渐变的工具,它可以将一个简单的线性渐变在指定方向上无限重复,从而产生各种有趣的视觉效果,如条纹、格子或其他图案。这个功能对于网页设计,尤其是创建...

    CSS3 linear-gradient线性渐变生成加号和减号的方法

    传统的实现方式是通过图片来实现+-按钮,而本文却将使用CSS3的linear-gradient线性渐变来实现购物车的加减操作。 要实现一个减号效果非常简单,例如要实现一个10px*2px的减号图形,则CSS: .minus { background-...

    css3网页动态渐变背景动画特效

    在CSS3中,我们可以使用`linear-gradient()`函数来定义渐变。基本语法如下: ```css background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ``` 这里的`direction`参数指定了渐变的方向...

    前端开源库-filter-gradient

    在现代浏览器中,CSS3提供了线性渐变(linear-gradient)和径向渐变(radial-gradient)两种方式来创建渐变效果。然而,早期的IE浏览器,尤其是IE8及以下版本,不支持CSS3渐变,而是采用滤镜(filter)技术。`filter...

    兼容IE与firefox的css 线性渐变(linear-gradient)

    现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient...Firefox background: -moz-linear-gradient(top, #FF0000, #F9F900); 参数:top、bottom垂直,left、r

    前端开源库-postcss-filter-gradient

    在现代CSS中,我们可以使用`linear-gradient`或`radial-gradient`来创建渐变。例如: ```css background: linear-gradient(to right, red, blue); ``` PostCSS Filter Gradient 插件会将这段代码转换为IE8-9支持的...

Global site tag (gtag.js) - Google Analytics