css3渐变中的,css3 中的渐变
虽说css3 都已经使用多年了,但是关于css3的渐变用的很少。今天遇见了,就学习了一下。
首先我们打开ps,新建一个画布,选择渐变工具,这个时候我们能够看到顶栏上面的渐变类型如下
第一个我们选中的是线性渐变,第二个是径向渐变,第三个是角度渐变,第四个是对称渐变,第五个是菱形渐变。对于css3 并没有提供这么多的渐变类型,只提供了两种基本的渐变类型:线性渐变和径向渐变,还有一种组合渐变就是重复渐变。
线性渐变
css3 中的线性渐变用的是 linear-gradient 这个函数。
基本语法:
= linear-gradient([ [ | to [, ]+)
= [left | right] || [top | bottom]
= [ |]?
语法说明:
:用角度值指定渐变的方向(或角度)。
to left:设置渐变为从右到左。相当于: 270deg
to right:设置渐变从左到右。相当于: 90deg
to top:设置渐变从下到上。相当于: 0deg
to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。
用于指定渐变的起止颜色:
:指定颜色。
:用长度值指定起止色位置。不允许负值
:用百分比指定起止色位置。
实例如下:
div{width:200px;height:100px;margin:10px 5px;border:1px solid #ddd000;
}#LinearStartToEnd{float:left;background:linear-gradient(#ff0000, #00ff00);
}#LinearPercentage{float:left;background:linear-gradient(#0000ff, #ff0000 52%, #00ff00);
}#LinearAnglePercentage{float:left;background:linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);
}#LinearAngle{float:left;background:linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);
}#LinearTopRight{float:left;background:linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);
}
径向渐变
使用函数:raidal-gradient
基本语法
= [ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]?
= circle | ellipse
= |[||]
= closest-side | closest-corner | farthest-side | farthest-corner
=
= [ | ]{2}
= |
= radial-gradient([ [ || ] [ at ]? , | at , ]?[[ , ]]+)
语法的简单描述
确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center
①:用长度值指定径向渐变圆心的横坐标值。可以为负值。
①:用百分比指定径向渐变圆心的横坐标值。可以为负值。
②:用长度值指定径向渐变圆心的纵坐标值。可以为负值。
②:用百分比指定径向渐变圆心的纵坐标值。可以为负值。
center①:设置中间为径向渐变圆心的横坐标值。
center②:设置中间为径向渐变圆心的纵坐标值。
left:设置左边为径向渐变圆心的横坐标值。
right:设置右边为径向渐变圆心的横坐标值。
top:设置顶部为径向渐变圆心的纵坐标值。
bottom:设置底部为径向渐变圆心的纵坐标值。
确定圆的类型
circle:指定圆形的径向渐变
ellipse:指定椭圆形的径向渐变。
circle | ellipse 都接受该值作为 size。
closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边。
closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角。
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边。
farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角。
circle 接受该值作为 size。
:用长度值指定正圆径向渐变的半径长度。不允许负值。
ellipse 接受该值作为 size。
:用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
:用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
实例如下:
#RadialCenterCircle{float:left;background:radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);
}#RadialClosestSide{float:left;background:radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);
}#RadialFarthestSide{float:left;background:radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);
}#RadialRightTop{float:left;background:radial-gradient(at right top, #ff0000, #ffff00, #00ff00);
}#RadialRadiusCenter{float:left;background:radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);
}#RadialGroup{float:left;background:radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),
radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);
}
重复渐变
重复渐变分为重复线性渐变和重复径向渐变,重复渐变的语法其实和相对应的基础渐变的语法是相类似的。
下面给出一些基本的实例:
#RepeatingLinearPercentage{float:left;background:repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%);
}#RepeatingLinearRight{float:left;background:repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%);
}#RepeatingLinearAngle{float:left;background:repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%);
}#RepeatingLinearBottomLeft{float:left;background:repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);
}#RepeatingRadialCircle{float:left;background:repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%);
}#RepeatingRadialTopLeft{float:left;background:repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);
}#RepeatingRadialClosestCorner{float:left;background:repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);
}
以上就是有关渐变的基本学习
css3渐变中的,css3 中的渐变相关推荐
- css中的渐变的属性,CSS3 渐变属性(Gradients)-线性渐变(linearGradient)
通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 丛本质上来说,既然 bac ...
- HTML背景渐变圆圈,背景渐变:html5+css3中的background: -moz-linear-gradient 用
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. 背景使用CSS渐变显示可以不使用图像就实现两 ...
- IE中的CSS3不完全兼容方案
IE中的CSS3不完全兼容方案 Opacity透明度 元素的透明度在IE中可以很方便的用滤镜来实现. view source print? 1 background-color:green; 2 op ...
- html css径向渐变,如何实现css3径向渐变如何定义中心和大小形状
如何实现css3径向渐变如何定义中心和大小形状 发布时间:2020-07-13 16:23:57 来源:亿速云 阅读:249 作者:Leah 如何实现css3径向渐变如何定义中心和大小形状?很多新手对 ...
- CSS3学习,常用常记(渐变)
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和 ...
- html渐变色CSS3 渐变,如何实现css3渐变色,css3渐变色怎么写
原标题:如何实现css3渐变色,css3渐变色怎么写 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS ...
- win7中VS2010中安装CSS3.0问题解决方法
在安装Standards Update for VS2010 SP1后,VS2010中没有CSS3.0问题,以下是我的解决方法 1.首先去官网下载 CSS 3 Intellisense Schema ...
- android listview下拉动画效果,Android开发中利用ListView实现一个渐变式的下拉刷新动画...
Android开发中利用ListView实现一个渐变式的下拉刷新动画 发布时间:2020-11-23 16:50:31 来源:亿速云 阅读:80 作者:Leah 本篇文章给大家分享的是有关Androi ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
最新文章
- ArrayList如何实现插入的数据按自定义的方式有序存放
- leetcode 72. 编辑距离
- 第03课:Spring Boot 启动原理
- CIW《操作系统安全》目录
- 添加几个手机联系人_One UI 3.0: 更细腻、更好用,这才是手机系统该有的样子
- 数据结构与算法的分析
- [数据预处理] onehot编码:是什么,为什么,怎么样
- 【赛尔笔记】文本摘要论文列表
- 刷题——移动盒子及其相关题目
- 哔哩哔哩视频音频下载器批量下载器
- 什么样的公司需要IT外包?
- 现在还没多少人知道的商业模式,月入百万不是梦——消费盲返模式
- MySQL运维篇之Mycat分片规则
- 解决 ajax 跨域
- 福州华侨中学计算机老师,三尺讲台著妙笔 谱写侨习好韶光——记2015级福州华侨中学实习队工作检查...
- 计算机截图方法,电脑简单又实用的截图方法推荐
- 计算机控制技术输入输出通道实验,计算机控制技术实验报告.doc
- ai描边工具怎么打开_AI的工具栏怎么用快捷键打开?
- python高精度定时器中断_0015 高精度定时器
- 菲记单词隐藏技能,英语童鞋一定要看