zoukankan      html  css  js  c++  java
  • CSS-3 渐变的使用

    CSS3 渐变(gradients)可以让您在两个或多个指定的颜色之间显示平稳的过渡。

    以前,您必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),您可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

    CSS3 定义了两种类型的渐变(gradients):

    • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
    • 径向渐变(Radial Gradients)- 由它们的中心定义

    CSS3 线性渐变

    为了创建一个线性渐变,您必须至少定义两种颜色结点。颜色结点即您想要呈现平稳过渡的颜色。同时,您也可以设置一个起点和一个方向(或一个角度)。

    先写一个简单的DEMO

    .div {
    	 500px;
    	height: 300px;
    	border-radius: 60px;
    	background-color: blue;
    	background-image: linear-gradient(top left, #ace 100px, #f96 200px);
    }
    
    
    <div class="block">
       <div class="div"></div>
    </div>
    

    第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

    可参考网站A 可参考网站B 可参考网站C

    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    maven POM.xml 标签详解
    Spring Boot Starter 的基本封装
    谷歌浏览器屏蔽广告的插件
    关于mysql中触发器old和new
    centos7 安装zookeeper3.4.8集群
    Flink架构、原理与部署测试
    图解Spark API
    汇编器构造
    Oracle11g CentOS7安装记录
    如何创造一门编程语言?
  • 原文地址:https://www.cnblogs.com/mcat/p/4785220.html
Copyright © 2011-2022 走看看