文档章节

CSS--渐变

wytao1995
 wytao1995
发布于 09/16 19:27
字数 345
阅读 17
收藏 0

一、什么是渐变

多种颜色平缓变化的一种显示效果

二、渐变的主要元素

色标:一种颜色,以及出现的位置,一个渐变至少两种色标

三、渐变的分类

    1、线性渐变

        以直线的方式来填充渐变色

        background-image

        取值:linear-gradient(angel,color1,color2....)

        angel:表示渐变的方向或角度,取值:to top,从下到上

                                                          to bottom,从上到下

                                                          to left ,从右到左

                                                          to right,从左到右

                                                角度 deg:

                                                         0deg : to top

                                                         90deg : to right

                                                         180deg : to bottom

                                                        270deg : to left

        color:色标取值:颜色  % 或者颜色   px 

    2、径向渐变

        以圆形的方式来填充渐变色

        background-img:

        取值:

        radial-gradient(半径 at 圆心,color-point1,color-point2,...)

                  半径:以px为单位的数字

                    圆心: x  y:以px为单位的数字或者百分比或者关键字left/center/right

            background-image: radial-gradient(100px at 50px 50px,red 50px,green);

    3、重复渐变

        将线性渐变和径向渐变重复几次实线渐变

background-image: repeating-linear-gradient(to bottom,red 0,green 10%,blue 20%,black 30%);
            background-image: repeating-radial-gradient(50px at center center,red 50%,green 100%);
        

 

© 著作权归作者所有

上一篇: CSS-字体格式化
下一篇: CSS-background
wytao1995
粉丝 1
博文 53
码字总数 33926
作品 0
六安
私信 提问
CSS渐变色效果的实现方法与效果演示

CSS渐变色(Gradients)也是一个类似的技术。现在火狐,谷歌浏览器,Safari,IE8+都支持这种技术,我们可以安全的在网站上使用它。下面我们来看看CSS渐变色(Gradients)技术基本的语法,浏览器支...

筱飞
2016/04/04
84
0
【CSS】渐变背景(background-image)

0007.jpg 以前,我们要实现这种渐变,可能要用 Photoshop 或 Fireworks 创建一个渐变图形,然后使用 background-image 属性把渐变图形放在元素的背景中。 现在,CSS支持渐变背景,可以理解为...

KelvinZ
2017/11/30
0
0
css的线性渐变详解

渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果,仅从...

筱飞
2016/12/21
33
0
CSS3 渐变(Gradients)

CSS3 渐变(gradients)可以让您在两个或多个指定的颜色之间显示平稳的过渡。 以前,您必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),您可以减少下载的事件和宽带的使...

wybo521
2016/01/23
19
0
深入理解 CSS linear-gradient

编者按:本文作者安佳,360 搜索事业部的前端开发工程师,W3C CSS 工作组成员。 关于渐变 渐变(Gradient)是 CSS3 引入的特性,其定义详见 CSS Images Module Level 31。它本质上是一个 2D...

奇舞周刊
2018/12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一次看懂 Https 证书认证

TLS > 传输层安全性协定 TLS(Transport Layer Security),及其前身安全套接层 SSL(Secure Sockets Layer)是一种安全协议,目的是为网际网路通信,提供安全及数据完整性保障。 如图,TLS...

极客收藏夹
17分钟前
3
0
https证书买哪家好?有哪些供应商

在选购https证书前除了要了解类型外,还需要了解https证书供应商,毕竟不同的供应商,提供的产品质量与服务也是有差异的。今天小编就为大家讲讲https证书供应商方面的内容,希望各位会喜欢。...

安信证书
19分钟前
4
0
Zuul 配置

概述:zuul底层是基于servlet,是由一系列的filter链构成。 1、路由配置 a、单例serverId映射 zuul: routes: client-a: path: /client/** serviceId: client-a 意思是...

java框架开发者
36分钟前
3
0
zk中FinalRequestProcessor解析

是处理器最后一个环节 FinalRequestProcessor implements RequestProcessor 处理器链最后一个环节处理事务和非事务请求最后一个环节 构造器 public FinalRequestProcessor(ZooKeeperServer z...

writeademo
36分钟前
3
0
Axios 详解

首先祝广大程序猿们节日快乐! 一、axios简介 基于promise,用于浏览器和node.js的http客户端 二、特点 支持浏览器和 node.js 支持 promise 能拦截请求和响应 能转换请求和响应数据 能取消请求...

张兴华ZHero
38分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部