radial-gradient：径向渐变

ellipse：椭圆形渐变默认，circle：圆形渐变
定义渐变大小，指定终点位置：
farthest-corner：默认，指定径向渐变的半径长度为：从圆心到离圆心最远的角
closest-side：从圆心到离圆心最近的边
closest-corner：从圆心到离圆心最近的角
farthest-side：从圆心到离圆心最远的边
at：指定起始点位置

linear-gradient：线性渐变

使用透明度：rgba(,,,)

函数中最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度，
0：完全透明；1：完全不透明

rgba()与hsla()

RGBA:Red-Green-Blue-Alpha
HSLA:Hue-Saturation-Lightness-Alpha（色调，饱和度，亮度，透明度）
在CSS3中可以使用以上两种色彩模式，都可以在设置颜色的同时设置其透明度，Alpha代表透明度
rgba模式中：前三个参数取值范围：0-255,或0%-100%;
hsla模式中：前三个参数分别代表色调（0-360），饱和度（0%-100%），亮度（0%-100%）

CSS3 渐变，rgba与hsla的更多相关文章

  1. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

  2. Css3渐变实例Demo（一）

    1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...

  3. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

  4. 再说CSS3渐变——线性渐变

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

  5. css3渐变详解

    今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...

  6. CSS3渐变——线性渐变

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

  7. CSS3 渐变（Gradients）

    参考: http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必 ...

  8. CSS3：CSS3 渐变（Gradients）

    ylbtech-CSS3:CSS3 渐变(Gradients) 1.返回顶部 1. CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳 ...

  9. css使用rgba()或hsla()设置半透明或完全透明边框border

    在css中我们想实现透明颜色,首先就会想到rgba()和hsla()这2个属性.这篇文章就简单介绍下使用这2种方式来实现半透明边框. 1.使用rgba方式: border: 10px solid rg ...

随机推荐

  1. 利用CNN进行多分类的文档分类

    # coding: utf-8 import tensorflow as tf class TCNNConfig(object): """CNN配置参数"&qu ...

  2. 信安实践——自建CA证书搭建https服务器

    1.理论知识 https简介 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HT ...

  3. CefSharp，Winform程序中加载web网页

    源码地址:https://github.com/cefsharp/CefSharp 开源相关:https://github.com/cefsharp/CefSharp/tree/master/CefS ...

  4. WindowsXP开机就打开数字小键盘的几种方法

    很多人WindowsXP登陆界面输入密码时,都要使用数字键盘,可是很多时候下都会出现小键盘灯不亮情况,非要每次都按一 下才行,是不是很麻烦呢?下面就把全面的解决方法告诉大家. 用户名和密码时,不要输入 ...

  5. macOS how to install python3

    macOS how to install python3 macOS & Python 3.7.2 https://www.python.org/downloads/mac-osx/ http ...

  6. IE显示对象不支持此属性或方法 的解决方法

    用C# 编写的ActiveX控件, 调试时,在世界之窗浏览器里能正确显示,但是不能和JS交互,也没有传说中的错误信息框出现,查了很多文档,后来想问题是不是出在浏览器上,换在IE8里调试,点击交互按钮, ...

  7. jenkins+maven+Tomcat8实现热部署

    个人记录 公司使用jenkins实现代码自动更新并部署 采用jenkins安装方式为war包,版本为:2.138.3,启动方式为Tomcat启动jenkins, 该博客操作步骤有些地方进行简化,各位需 ...

  8. False Ordering LightOJ - 1109（暴力。。唉，。又是一个水题。。）

    We define b is a Divisor of a number a if a is divisible by b. So, the divisors of 12 are 1, 2, 3, 4 ...

  9. ZJOI2018外省选手酱油记Day1

    Day0 上午考试...又爆零了 下午讲完题后放假 然后就滚回去收拾行李准备去\(ZJ\) Day1 衢州?我怎么从来没听过这个地方..肯定是我见识少 下午 上高铁出发,\(3个小时\),看了一下电影 ...

  10. 【NOI】荷马史诗

    追逐影子的人,自己就是影子 ——荷马 Allison最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的<荷马史诗>.但是由<奥德赛>和< ...