zoukankan      html  css  js  c++  java
  • 背景颜色渐变

    背景颜色线性渐变【 linear-gradient】

    语法:

    background:linear-gradient(起点,起点颜色,过度色[可选],终点颜色);

    起点:top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。

    过度色:可以插入多个,表示多种颜色的渐变

    demo

    <style type="text/css" rel="stylesheet">
      .box{
        width: 100px;
        height: 100px;
        margin: 50px auto;
        /*从上之下线性渐变*/
        /*方向,线性渐变开始颜色,线性渐变过度颜色,线性渐变最终颜色,20px表示距某个方向20px开始*/
        background: -moz-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: -webkit-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: -o-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: -ms-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        /*根据给定角度线性渐变*/
        background: -moz-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: -webkit-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: -o-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: -ms-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        /*从左上角到右下角线性渐变*/
        background: -moz-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: -webkit-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: -o-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: -ms-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: linear-gradient(top right, #0099ff, #ffffff, #00cc00);
      }
    </style>
    
    <div class="box"></div>
  • 相关阅读:
    插入排序(C语言版)
    2015蓝桥杯分机号(C++C组)
    2015蓝桥杯二项式
    2016蓝桥杯报纸页数(C++C组)
    区块链
    C语言学生管理系统完善版
    数据结构队列
    C语言数据结构队列
    C语言数据结构栈
    javascript 事件
  • 原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8361877.html
Copyright © 2011-2022 走看看