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. centos6 安装图形化界面

    1.首先进行光盘的挂载,注意光盘挂载时不会自动建立目录的,所以需要自己建立目录 mkdir /mnt/cdrom mount /dev/cdrom /mnt/cdrom #dev目录为设备目录 2.更 ...

  2. Date 类的使用

    package com.Date.Math; import java.text.ParseException; import java.text.SimpleDateFormat; import ja ...

  3. JS学习:JavaScript的核心

    分享到 分类 JS学习   发布 ourjs  2013-12-02 注意 转载须保留原文链接,译文链接,作者译者等信息.     作者: JeremyWei  原文: JavaScript The ...

  4. 在win7 64位操作系统下 arduino驱动安装问题的解决

    主要参考以下两个博客: 操作教程:http://blog.csdn.net/u013926582/article/details/24442583 文件下载:http://www.arduino.cn ...

  5. KEIL C51 printf格式化输出特殊用法

    作者:dragoniye   发布:2014-02-15 12:44   分类:硬件     抢沙发   /*******************************************KEI ...

  6. Scrum 项目准备5.0

    1.团队成员完成自己认领的任务. 2.燃尽图:理解.设计并画出本次Sprint的燃尽图的理想线.参考图6. 3.每日立会更新任务板上任务完成情况.燃尽图的实际线,分析项目进度是否在正轨.    每天的 ...

  7. ubuntu16.04 关闭防火墙的方法

    开启防火墙 ufw enable 关闭防火墙 ufw disable

  8. MSTSC 修改端口的简单方法 3389

    1. 3389端口太过危险  最简单的办法是 修改默认端口方法非常简单. 2. win+r 打开运行, 输入 regedit 打开 注册表 3. 在地址栏输入 远程的服务的路径 输入的内容为: 计算机 ...

  9. 每个Android开发者必须知道的内存管理知识

    原文:每个Android开发者必须知道的内存管理知识 拷贝在此处,以备后续查看. 相信一步步走过来的Android从业者,每个人都会遇到OOM的情况.如何避免和防范OOM的出现,对于每一个程序员来说确 ...

  10. redis压力测试工具-----redis-benchmark

    redis做压测可以用自带的redis-benchmark工具,使用简单 压测命令:redis-benchmark -h 127.0.0.1 -p 6379 -c 50 -n 10000 压测需要一段 ...