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. 学习pl/sql之一

    --使用pl/sql语句打印一个hello world begin   dbms_output.put_line('hello,world'); end;      但是在sqlplus里面就不一样了 ...

  2. 软工1816 · Beta冲刺(3/7)

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 协助后端完成历史记录接口.美食排行榜接口 完成食堂平面图的绘制 确定web端业 ...

  3. angularJS1笔记-(19)-angular异步加载包的方式

    我们平时写的导入包的方式都是同步方式,有时候会显得过于卡顿,这样我们就可以使用异步加载的方式. script.js方式: 执行结果为: 异步加载还可以加载多个即为script([,,,],functi ...

  4. 通过ctrl+r快速启动程序

    步骤1:在[我的电脑]右键-[系统属性]-[环境变量]中增加如图1设置并保存 步骤2:在图2中添加步骤1中增加的变量名并保存 步骤3:在ctrl+r的运行窗口中输入步骤1中的变量名即可快速启动程序   ...

  5. springmvc上传文件报错org.springframework.beans.BeanInstantiationException: Could not instantiate bean class [org.springframework.web.multipart.MultipartFile]

    在用springmvc+mybatis进行项目开发时,上传文件抛异常... org.springframework.beans.BeanInstantiationException: Could no ...

  6. [转帖]go 命令

    golang笔记——命令  https://www.cnblogs.com/tianyajuanke/p/5196436.html 1.GO命令一览 GO提供了很多命令,包括打包.格式化代码.文档生成 ...

  7. linux 负载均衡配置 keepalive lvs 使用nginx转发 CentOS7 搭建LVS+keepalived负载均衡

    最近希望能够配置一下负载均衡,在虚拟机上面,但是网上找了很多资料很零散,对于不了解的人,很多不够详细,最近终于做好了,把具体的步骤写下来,方便各位网友查阅学习 这个实验需要安装nginx如果没有安装过 ...

  8. C/C++缓冲区刷新问题

    参考链接 参考链接2 Buffers are normally maintained by the operating system, which determines the optimal tim ...

  9. 关于Swift中的泛函数find的问题

    对于一个数组Array,我们往往需要判断其是否包含某个子项,又或者要查找某个子项是否在这个数组中. 假设有这样一个包含坐标的数组 var pointArray:[CGPoint] = [CGPoint ...

  10. 学习Spring Boot:(六) 集成Swagger2

    前言 Swagger是用来描述和文档化RESTful API的一个项目.Swagger Spec是一套规范,定义了该如何去描述一个RESTful API.类似的项目还有RAML.API Bluepri ...