0078 背景线性渐变:background: linear-gradient(起始方向, 颜色1, 颜色2, ...)

语法1:
background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);

背景渐变必须添加浏览器私有前缀
起始方向可以是: 方位名词 或者 度数 , 如果省略默认就是 top

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 200px;
            /* 背景渐变必须添加浏览器私有前缀 */
            /* background: -webkit-linear-gradient(left, red, blue); */
            /* background: -webkit-linear-gradient(red, blue); */
            background: -webkit-linear-gradient(top left, orange, yellowgreen);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

原文地址:https://www.cnblogs.com/jianjie/p/12127288.html

时间: 2024-10-08 16:25:44

0078 背景线性渐变:background: linear-gradient(起始方向, 颜色1, 颜色2, ...)的相关文章

CSS3背景线性渐变

5.背景线性渐变:background-gradient (1)linear:线性渐变, 谷歌浏览器:(webkit) background:-webkit-gradient(linear ,0 0,0 80% , from(#fff),  to(#000));(水平渐变) background:-webkit-gradient(linear ,0 0, 80% 0 , from(#fff),  to(#000));(垂直渐变) background:-webkit-gradient(linea

进阶CSS3 background-image的linear-gradient线性渐变 实用用法 条纹 中心点 方向 颜色过度

我们来了解一下 linear-gradient() 是什么呢? 1.linear-gradient 是一个 CSS3 版本的新特性用于创建一个线性渐变效果的背景,如下图. 效果 代码: 原文地址:https://www.cnblogs.com/xiaolantian/p/12629076.html

Android获得线性渐变某点的颜色

安卓官方确实提供了好多非常强大的工具给我们了,例如我们最近经常在shape中加入gradient(渐变),像我的项目中用的是线性渐变, [html] view plain copy <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners andr

css3 Gradients 线性渐变

代码块 html页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>css3 Gradients</title> </head> <body> <div

css3渐变之线性渐变

css3定义了两种类型的渐变,即线性渐变和径向渐变.这里我要说的是线性渐变. 为了创建一个线性渐变,你必须至少定义两种颜色结点.颜色结点即你想要呈现平稳过渡的颜色.同时,你也可以设置一个起点和一个方向(或一个角度). 语法:background: linear-gradient(direction, color-stop1, color-stop2, ...); 注意:线性渐变默认是从上到下. 从上到下的渐变: #grad {  background: -webkit-linear-gradie

background 线性渐变

原文链接:http://caibaojian.com/css3-background-gradient.html 综上所述,线性渐变的兼容写法如下:· //code from http://caibaojian.com/css3-background-gradient.html .gradient{ background: #000000; background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -

CSS3 Gradient线性渐变

废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script><style type="text

深入理解CSS3 gradient斜向线性渐变——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想得那么简单 提问,使用CSS3 gradient渐变,在一个400*300的div层上实现一个(100px, 100px)到(200px, 200px)由红到黄的斜向线性渐变,该如何实现? //zxx: 这里的讨论CSS3渐变都是基于新式规范写法,且忽略私有前缀 我们可能知道水平渐变的实现,类似这样

css3的背景颜色渐变@线性渐变

背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); opera浏览器    background: -o-linear-gradient(position/deg,startColor,endColor); safari和chrome浏览器    background: -webkit-linear-gradient(position/deg,startCo