css渐变颜色php,CSS3中的颜色值RGBA以及渐变色的具体详解(图)
CSS3之前渐变色图片只能用背景图片
CSS3的渐变色语法可以让我们省去下载图片的开销
并且在改变浏览器分辨率时有更好的效果
颜色值RGBA
我们熟悉的rgb颜色标准,是由r(red)、g(green)、b(blue)三种颜色叠加变化形成各种颜色
取值0~255,或0~100%
rgba就是在rgb基础上增加了alpha不透明度参数.demo { width: 100px; height: 100px; background-color: rgb(255, 0, 0);}
.demo { width: 100px; height: 100px; background-color: rgba(255, 0, 0, 0.5);}
alpha取值0~1,值越小越透明
线性渐变linear-gradient
gradient是“倾斜度”的意思,linear是“线性的”的意思
渐变色就是在多个颜色间平稳过渡,形成绚丽的色彩
线性渐变linear-gradient参数有渐变的方向(选填)和任意个渐变色.demo { width: 100px; height: 100px; background: linear-gradient(red,lime,blue);}
注意我这里写的是background不是background-color
(其实渐变色是background-image的函数)
不填写渐变方向默认是从上到下
渐变方向有以下属性值
to top、to bottom(默认)、to left、to right
to top left、to top right、to bottom left、to bottom right
或者填写角度 xxxdeg
比如to top left就代表方向朝向左上.demo { width: 100px; height: 100px; background: linear-gradient(to top left,red,lime,blue);}
角度0deg与to top等价,增加角度,相当于顺时针旋转.demo { width: 100px; height: 100px; background: linear-gradient(20deg,red,lime,blue);}
在每一个颜色的后面可以添加各个颜色渐变的位置.demo { width: 100px; height: 100px; background: linear-gradient(red 30%,lime 50%,blue 70%);}
如果不填的话,浏览器就默认均分了,比如三个色值默认就是0%,50%,100%
还有一个不常见的函数repeating-linear-gradient使我们可以重复线性渐变.demo { width: 100px; height: 100px; background: repeating-linear-gradient(red, rgba(100,100,100,0.5),blue 50%);}
结果就画出了这样巨丑无比的渐变色
径向渐变radial-gradient
radial意思是“径向的、辐射状的”
就是一个渐变中心向外放射渐变.demo { width: 200px; height: 100px; background: radial-gradient(red,lime,blue);}
和线性渐变类似
不过第一个参数(选填)是径向渐变的渐变形状、位置
可以使用圆形circle、椭圆形ellipse(默认).demo { width: 200px; height: 100px; background: radial-gradient(circle,red,lime,blue);}
可以使用shape at postion的格式定义渐变中心的位置.demo { width: 200px; height: 100px; background: radial-gradient(circle at 30% 30%,red,lime,blue);}
渐变位置可以使百分数形式,也可以是像素形式
如果只写一个值时,另一个值默认是中间位置50%.demo { width: 200px; height: 100px; background: radial-gradient(circle at 30%,red,lime,blue);}
渐变尺寸如果你不想用关键字,也可用用数字形式.demo { width: 200px; height: 100px; background: radial-gradient(100px 100px at 50px 50px,red,lime,blue);}
表示渐变尺寸100px*100px,渐变位置50px*50px
径向渐变同样有一个重复渐变的函数
用法和线性渐变的类似,这里就不多解释了.demo { width: 200px; height: 100px; background: repeating-radial-gradient(red 10%,lime 20%,blue 30%);}
css渐变颜色php,CSS3中的颜色值RGBA以及渐变色的具体详解(图)相关推荐
- [css] 举例说明在css3中怎么实现背景裁剪?
[css] 举例说明在css3中怎么实现背景裁剪? background-clip: border-box(默认,背景延伸至边框外沿,但是在边框的下层) padding-box(背景延伸至paddin ...
- 计算机底纹不起作用,CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11)...
CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11) 我有以下代码: .skills_column { padding: 5 ...
- ASP中利用OWC控件实现图表功能详解[zz]
ASP中利用OWC控件实现图表功能详解 在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图, ...
- Python的Django框架中forms表单类的使用方法详解2
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...
- linux中常用的60个命令及作用详解
Linux 必学的 60 个命令 Linux 提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存 取.目录操作.进程管理.文件权限设定等.所以,在 Linux 系统上工作离不开使用系 ...
- mysql小计_Mysql必读用SQL实现统计报表中的小计与合计的方法详解
<Mysql必读用SQL实现统计报表中的"小计"与"合计"的方法详解>要点: 本文介绍了Mysql必读用SQL实现统计报表中的"小计&qu ...
- ASP中利用OWC控件实现图表功能详解
在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图,簇状柱型图,折线图的使用方法.OWC的更 ...
- android启动页使用gif,android中使用react-native设置应用启动页过程详解
一.背景 在我们使用react-native进行编写代码的时候,当启动应用的时候,我们会看到如下界面 然而,这样的启动界面是非常的不又好,那么我们该怎么进行处理启动界面呢?有如下两种方案 二.方案 1 ...
- 对python3中pathlib库的Path类的使用详解
原文连接 https://www.jb51.net/article/148789.htm 1.调用库 ? 1 from pathlib import 2.创建Path对象 ? 1 2 3 4 5 ...
- java中属性文件读取案例_java相关:Spring中属性文件properties的读取与使用详解
java相关:Spring中属性文件properties的读取与使用详解 发布于 2020-6-3| 复制链接 摘记: Spring中属性文件properties的读取与使用详解实际项目中,通常将一些 ...
最新文章
- android类名方法名不混淆,android – 如何告诉Proguard混淆类名
- https跨域到http问题解决
- 解决AIX报错0506-342 无法挂载分区问题
- VC如何在单文档里显示对话框
- Redis持久化总结
- 在网络上提供资源的计算机,在计算机网络中通常把提供并管理共享资源的计算机称为...
- PreScan中对象沿预设轨迹运动的若干方式介绍
- Centos 6.4 KVM安装和配置
- Oracle数据库个人整理常用的表空间、用户、授权操作
- Android 中关于Cursor类的介绍
- python--综合小案例--文件读取以及梳理
- python 爬虫抓取网页数据导出excel_如何用excel实现网页爬虫
- JAVA模拟学生选课系统(附下载链接)
- 什么是JSONP及其实现原理
- Fast RTPS原理与代码分析(2):动态发现协议之参与者发现协议PDP
- H5网页去除苹果手机底部白边
- 高性能计算--HPCC--他人评述
- acrobat PDF删除部分_PDF编辑器Adobe Acrobat DC 2019
- python夯实基础日记-函数详解
- 关机状态下开启adb_root
热门文章
- StringUtils简单判断字符串是否为null或者空字符串
- CDH使用之CM 5.3.x安装
- 全网、全国最好用的基于经纬度的天气查询、天气预报接口
- No Dialect mapping for JDBC type 错误分析,Hibernate和数据库类型对应
- 基于Linux平台Softimage XSI 演示
- 运行aspnet时要求启用windows集成身份验证
- adapter中的数据错误原因和解决方案
- python爬虫设置代理ip_python爬虫使用代理ip或请求头的问题
- 微信公众号发送消息接口(群发接口)
- PHP 过滤字符串特殊符号