php渐变背景颜色,css背景颜色渐变案例:线性渐变和径向渐变效果实例详解
渐变是两种或多种颜色之间的平滑过渡。以前,必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。渐变又分为线性渐变和径向渐变两种。以下是css背景颜色渐变:线性渐变和径向渐变效果实际案例
一、线性渐变(linear-gradient)
实现线性渐变,至少需要定义两种颜色,这两种颜色就是你想平稳过渡的颜色,即:其中一种颜色为起点,另一种颜色为结束点。
语法:
background: linear-gradient(colorA,colorB)
colorA为起点颜色,colorB为结束点颜色。
还可以定义渐变的方向,是从上到下渐变,还是从左至右渐变,又或者是从左上角至右下角渐变(默认情况下是从上至下渐变的)。
语法:
background: linear-gradient(direction,colroA,colorB)
direction表示渐变的方向,直接写方向的起点即可,比如:渐变方向为从左至右,直接写left即可;渐变方向为从下至上,直接写bottom即可;渐变方向从左上角至右下角,书写为background: linear-gradient(left top,colorA,colorB)。
css线性渐变案例
举例:从左下角至右上角,从红色到蓝色的渐
效果图:
代码:
div{
width: 400px;
height: 200px;
background: -webkit-linear-gradient(left bottom,red,blue);
background: -o-linear-gradient(left bottom,red,blue);
background: -moz-linear-gradient(left bottom,red,blue);
background: linear-gradient(left bottom,red,blue);
}
二、径向渐变(radial-gradient)
CSS3径向渐变是圆形或椭圆形的渐变。颜色不再沿着一条直线轴变化,而是从一个起点向所有方向发射。它比线性渐变更复杂。
可以定义它的中心(默认渐变是中心是center)、形状(原型或者椭圆形)、大小等。
语法:background: radial-gradient(position,shape,size,start-color,last-color)
position
:用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
:用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left:设置左边为径向渐变圆心的横坐标值。
center:设置中间为径向渐变圆心的横坐标值或纵坐标。
right:设置右边为径向渐变圆心的横坐标值。
top:设置顶部为径向渐变圆心的纵标值。
bottom:设置底部为径向渐变圆心的纵标值。
shape
可以是值 circle 或 ellipse。circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
size
closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;
closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边;
farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角;默认值
css径向渐变案例
举例:从60%,55%的位置开始渐变,指定径向渐变的半径长度为从圆心到离圆心最近的边,从内向外渐变颜色为blue,green,yellow,black
效果图:
代码:
div{
width: 400px;
height: 200px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
以上,介绍了渐变的相关用法,包括经向渐变和线性渐变,希望对你有帮助!
php渐变背景颜色,css背景颜色渐变案例:线性渐变和径向渐变效果实例详解相关推荐
- css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边 一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...
- HTML添加style修改颜色,css字体颜色设置教程(CSS color)
CSS颜色样式篇目录认识CSS 颜色(color) 网页颜色基础 两种方法设置对象颜色样式 文字颜色控制color 网页背景颜色color 边框颜色color 网页color RGB设置 网页colo ...
- python的turtle怎么设置rgb颜色_Python : turtle色彩控制实例详解
? 1 turtle.pencolor(* args ) 返回或设置pencolor. 允许四种输入格式: ? 1 pencolor() 将当前的pencolor返回为颜色规范字符串或元组(参见示例) ...
- jquery将html转为pdf文件,HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解
本篇教程介绍了HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.目的:在前段是 jQuery库 或 ...
- css背景透明(css背景透明度怎么设置)
CSS 背景颜色透明怎么弄 外层div: background-color: rgba(255, 255, 255, 0.9); /* 白色并且阿尔法通道是0.9*/ 内层div: backgroun ...
- html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- CSS如何设置自定义渐变色? 线性渐变篇
CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡. CSS定义了三种渐变类型: Linear Gradients (goes down/up/left/right/diagonally) 下 ...
- html中页面背景属性,css背景属性有哪些?
css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...
- html css字体样式颜色,css字体颜色怎么设置?
在CSS中想要设置字体颜色,可以使用color属性.color属性规定文本的颜色:该属性设置了一个元素的前景色:光栅图像不受 color 影响. css要设置一个元素的前景色(在 HTML 表现中,就 ...
最新文章
- 刁钻!你和队友之间选一个淘汰,你怎么选?
- 如何选择基于 Kubernetes 的 PaaS?
- java http 1.1_java11新特性HttpClient
- Maven依赖排除 禁止依赖传递 取消依赖的方法
- nodejs项目安装ant design
- $$\int_0^{nh}x(x-h)\cdots (x-nh)dx=h^{n+2}\int_0^nx(x-1)\cdots (x-n)dx$$
- 克隆CentOS设置网络连接
- 物业管理系统(C语言)
- c语言常用绘图软件有哪些,数学绘图软件有哪些?好用的数学绘图软件推荐
- RGB三色灯珠WS2812B/WS2815B
- spring boot小说网站系统 毕业设计源码论文+答辩PPT
- 分析-MQ消息队列中间件-在IM即时通讯系统的用途
- VS2017编译geos
- Lambda表达式----“进化论”
- 在知网上找不到的英文文献应该去哪里找?
- leetcode 845.数组中的最长山脉(python)
- the7_v610优化破解演示数据
- 移动通信第三章,组网技术基础
- Vue-Element写一个简单的列表管理23/100统
- 【大数据之Linux】
热门文章
- 计算机不买游戏本可以吗,都8102年了还虚假宣传?这种游戏本到底能不能买
- HTML语义化标签的理解
- 安科瑞无线测温产品在荷兰某配电室项目中的应用-安科瑞耿敏花
- 语雀绘制UML时序图
- 在自然对话中解释机器学习模型——通过建立一个对话式的XAI代理;保护峰值:关于尖峰神经网络对对抗性示例的可转移性和安全性;SUNet:用于全景分段的具有规模意识的统一网络;一种新型的可用于主体转移脑机
- python基础语法—day02(笔记)
- 表格实现excel导出功能
- 一键启动多程序BAT脚本
- springboot 指定jdk版本启动jar包
- 多城争抢RoboTaxi落地头炮,长沙或将最先胜出?