Css3-颜色 color
一、颜色 RGBA
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。
语法：color：rgba(R,G,B,A)
R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%，超出范围的数值将被截至其最接近的取值极限。A为透明度参数，取值在0~1之间，不可为负值。
二、渐变色 Gradient
Gradient 分为线性渐变(linear)和径向渐变(radial)。
1.线性渐变
语法：
线性渐变 linear-gradient (渐变方向角度，颜色的起始点和结束点(可以有2两至多个色值) )
参数：第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：
注：第一个参数省略时，默认为“180deg”，等同于“to bottom”。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gradient </title>
<style>
#box {
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head> <body> <div id="box">
从右到左的线性渐变背景
</div> </body> </html>
线性渐变
2.径向渐变
语法：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gradient </title>
<style>
#box1 {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: radial-gradient(red, green, blue);
}
</style>
</head> <body> <div id="box1">
径向渐变
</div> </body> </html>
径向渐变
Css3-颜色 color的更多相关文章
- CSS3颜色特征温故
网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...
- css3 颜色记
css3 颜色 opacity 使元素呈现出半透明效果. opacity:alphavalue || inherit alphavalue:默认值为1,可以取0~1任意浮点数.取值为1时,元素完全不透 ...
- CSS3 & gradient & color & background
CSS3 & gradient & color & background css background https://developer.mozilla.org/en-US/ ...
- CSS3颜色渐变模式
1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...
- 熟悉css/css3颜色属性
颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...
- css3 -- 颜色与不透明度
1.opacity: opacity的值会被它的所有子元素继承,也就是说不可能让一个元素比他的父元素更加不透明,但你可以让他变得更透明点 Firefox Webkit Opera支持,注意IE 2 ...
- Android 颜色Color（转）
摘自:http://blog.sina.com.cn/s/blog_6f3ff2c90100t2oa.html Android中使用4个数字来表示颜色,分别是alpha.红(red).绿(green) ...
- Android 颜色Color
Android中使用4个数字来表示颜色,分别是alpha.红(red).绿(green).蓝(blue)四个颜色值(ARGB).每个数字取值0-255,因此一个颜色可以用一个整数来表示.为了运行效率, ...
- 颜色(color)转换为三刺激值(r/g/b)（干股）
//颜色转换 ##665522 - 三色值 + (UIColor *)setFontColorWithString:(NSString *)color { NSString *cString ...
- android颜色color.xml设置
XML Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...
随机推荐
- QTextStream写文件中文乱码解决办法
1.首先把Qt Creator的编辑器设置为使用 UTF-8: 工具-->选项-->文本编辑器-->行为,在右侧选项界面找到文件编码选项,设置为 UTF-8.2.使用 QText ...
- 覆盖（Override）和重写（Overload）的区别
Overload Overload是重载的意思. 重载Overload表示同一个类中可以有多个名称相同的方法,但这些方法的参数列表各不相同(即参数个数或类型不同). Overload对我们来说可能比较 ...
- git点滴
git指定版本,SHA-1短的,长的都可以 git checkout c66a9be git checkout c66a9befsadf1sdf1s3fd21 git log ##查询本地log gi ...
- django权限之二级菜单
遗漏知识点 1.构建表结构时,谁被关联谁就是主表,在层级删除的时候,删除子表的时候,主表不会被删除,反之删除主表的话,字表也会被删除, 使用related_name=None 反向查询,起名用的 ...
- UVa 1009 Sharing Chocolate (数位dp)
题目链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_proble ...
- dubbo、web应用 项目结构以及发布目录结构
一.dubbo服务项目结构及发布结构 dubbo 服务项目结构 xxxxx-api 接口类和一些DTO 用于供其他项目依赖 需要提供dubbo服务的接口命名 以Facade结尾 (xxxxxFacad ...
- php中ajax的使用实例讲解
一.总结 1.多复习:代码都挺简单的,就是需要复习,要多看 2.ajax原理:ajax就是部分更新页面,其实还在的html页面监听到事件后,然后传给服务器进行操作,这里用的是get方式来传值到服务器, ...
- sublime px转rem插件
http://www.cnblogs.com/phoebewang00/p/5593699.html lime 插件- px 转rem 一个CSS的px值转rem值的Sublime Text 3自 ...
- web css
CSS圆角——透明圆角化背景图片 序言:第一章中我介绍了最基本的纯CSS圆角框的实现原理,并给出Demo,在本章中会对上一个模型作一些新的创新,实现将背景图片透明圆角化.并给出一些漂亮的通用演示效果. ...
- linux发版
使用MobaXterm_v8.5 1.upload需要更换的文件 2.关闭Tomcat cd /usr/local/tomcat/apache-tomcat-6.0.30-pcitcaly/ ...