CSS3_线性渐变_径向渐变----背景
渐变的本质： 绘制一张背景图片，所以使用 background 或者 background-image
background 的诸多属性，渐变都是可以使用的（repeat，position）
百分比： 把元素渐变方向的整体长度看成 100%
线性渐变背景
- 使用： （至少三个参数，从第二个参数开始，都是颜色）
- background-image: linear-gradient( 方向 开始颜色 结束颜色);
- 方向
- 默认值（从上到下）
background-image: linear-gradient(#000, #fff);
- to right 到右
background-image: linear-gradient(to right, #000, #fff);
background-image: linear-gradient(to left, #000, #fff);
background-image: linear-gradient(to top, #000, #fff);
background-image: linear-gradient(to bottom, #000, #fff);
- to right bottom 到右下角
background-image: linear-gradient(to right bottom, #000, #fff);
background-image: linear-gradient(to right top, #000, #fff);
background-image: linear-gradient(to left top, #000, #fff);
background-image: linear-gradient(to left bottom, #000, #fff);
- 角度 deg
background-image: linear-gradient(0deg, #000, #fff);
background-image: linear-gradient(90deg, #000, #fff);
background-image: linear-gradient(180deg, #000, #fff);
background-image: linear-gradient(270deg, #000, #fff); background-image: linear-gradient(45deg, #000, #fff);
background-image: linear-gradient(135deg, #000, #fff);
background-image: linear-gradient(225deg, #000, #fff);
background-image: linear-gradient(315deg, #000, #fff); background-image: linear-gradient(-45deg #000, #fff);
background-image: linear-gradient(-90deg #000, #fff);
- 默认值（从上到下）
- 颜色结点
background-image: linear-gradient(red %10， green 20%， blue 30%, yellow 40%); /*
从 0% 到 10% 为 red
从 10% 到 20% 为 red 到 green 的渐变
从 20% 到 30% 为 green 到 blue 的渐变
从 30% 到 40% 为 blue 到 yellow 的渐变
从 40% 到 100% 为 yellow 最后一个颜色百分比不写，默认到 100%
第一个颜色百分比不写，默认 0%
*/
- 应用： 45 度红白格（马赛克地砖）
- 明确的 颜色分割线（red 25%, white 25%）
- 多重渐变背景，以逗号隔开，适当位置设置透明颜色
- 123
重复的线性渐变 background-image: repeating-linear-gradient(45deg, red 0%, white 20%);
- 颜色结点，除了可以写百分值，还可以写一个具体的像素值。写像素值，必须写两个值：起始和结束。
background-image: repeating-linear-gradient(45deg, white 0px, white 10px, red 10px, red 20px; // 发廊灯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} #outer_box {
width: 100px;
height: 300px;
margin: 300px auto 0; overflow: hidden
} #inner_box {
width: 100px;
height: 3000px;
margin-top: -900px; background-image: repeating-linear-gradient(155deg, red 0px, red 20px, black 20px, black 40px);
} #inner_box:hover {
margin-top: 0px;
transition: 9s;
}
</style>
</head> <body> <div id="outer_box">
<div id="inner_box">
</div>
</div> </body>
</html>
- 文字光斑 动画
- 文字要设置透明 color: rgba(255, 255, 255, 0.3);
- 3
径向渐变背景 background-image: radia-gradient(形状尺寸, 开始颜色, 结束颜色);
从起点到终点，颜色从内向外渐变。
- 形状尺寸 参数
- circle 默认形状，圆形
- 当 width 相等 height 时，总是圆形
- 当 width ！= height 时，是椭圆
- 颜色结点
- 百分比，参照圆心到最远端的距离
- 尺寸大小
- closest-side circle 最近边
- farthest-side circle 最远边
- closest-corner 最近角
- farthest-corner 最远角
- at 设置圆心
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
- 重复的径向渐变 background-image: repeating-radial-gradient(red 0%, olive 25%);
- background-image: repeating-radial-gradient(red 0%, olive 25%, blue 50%);
CSS3_线性渐变_径向渐变----背景的更多相关文章
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- css3 线性渐变和径向渐变
线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...
- 使用canvas来完成线性渐变和径向渐变的功能
fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色. 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数. 第一步 : 使用一个新的函数cre ...
- CSS3线性渐变和径向渐变
background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...
- Css3渐变(Gradients)-径向渐变
CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...
- Canvas使用渐变之-径向渐变详解
创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1) 一共六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...
- css3渐变之径向渐变
径向渐变由它的中心定义.可以指定渐变的中心.形状(原型或椭圆形).大小.默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthes ...
- CSS3渐变——径向渐变
上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...
随机推荐
- MySQL实战45讲学习笔记：日志系统（第二讲）
一.重要的日志模块:redo log 1.通过酒店掌柜记账思路刨析redo log工作原理 2.InnoDB 的 redo log 是固定大小的 只要赊账记录在了粉板上或写了账本上,之后即使掌柜忘记了 ...
- BeautifulSoup解析模块
简介: Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式. 使用 from bs4 impor ...
- [物理学与PDEs]第5章习题4 广义 Hookean 定律的张量的对称性
设材料是超弹性的, 并设参考构形为自然状态, 证明由线性化得到的张量 ${\bf A}=(a_{ijkl})=\sex{2\cfrac{\p \bar p_{ij}}{c_{kl}}}$ 具有以下的对 ...
- [物理学与PDEs]第4章第2节 反应流体力学方程组 2.2 反应流体力学方程组形式的化约
1. 粘性热传导反应流体力学方程组 $$\beex \bea \cfrac{\rd \rho}{\rd t}&+\rho \Div{\bf u}=0,\\ \cfrac{\rd Z}{\rd ...
- js中精度问题以及解决方案
js中的数字按照IEEE 754的标准,使用64位双精度浮点型来表示.其中符号位S,指数位E,尾数位M分别占了1,11,52位,并且在ES5规范中指出了指数位E的取值范围是[-1074, 971]. ...
- Python3：排序函数sort() 和 sorted() 之介绍
今天来讲一下Python中的排序函数.Python中有2个内建的排序函数,分别为sort() 和 sorted() 下面介绍分别介绍一下2个函数: 1.有一个列表 :a=[1,4,5,88,0,7], ...
- 20165230 Exp3 免杀原理与实践
目录 1.实验内容 2.基础问题回答 3.实验内容 任务一:正确使用免杀工具或技巧 使用msf编码器,msfvenom生成如jar之类的其他文件 使用veil-evasion 自己利用shellcod ...
- Jetty - 教程
Jetty使用教程(一)——开始使用Jetty : https://www.cnblogs.com/yiwangzhibujian/p/5832597.html jetty 的工作原理以及与 Tomc ...
- Python的真和假
python和其他编程语言一样,,,0是假,非0是真,,python 一切皆对象,真假是每个对象的属性.像数据结构,,空的数据结构是False. eg: "spam" True & ...
- POJ 1269 Intersecing Lines （直线相交）
题目: Description We all know that a pair of distinct points on a plane defines a line and that a pair ...