CSS3 Gradient 分为 linear-gradient(线性渐变) 和 radial-gradient(径向渐变)。记住渐变并不是CSS3的一个属性,而是一个属性的值,虽然在CSS3中没有专门注明渐变是针对background的,但是目前我所了解到的是只有background才会应用渐变属性(background-image也可以
)。
我们先直接通过两个实例来说明这两种渐变的基本用法:分享一个最好用的UI前端框架!
线性渐变linear-gradient:
- background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
- background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
- background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
- background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
其中第二行的-webkit-gradient是webkit内核浏览器老版本的写法。
效果如下:
径向渐变radial-gradient: 分享一个最好用的UI前端框架!
- background: -moz-radial-gradient(#ace, #f96, #1E90FF);
- background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
效果:
IE浏览器对gradient的支持和其他现代浏览器差别较大,我们将在<<CSS3 径向渐变(radial-gradient)>>和<<CSS3 线性渐变(linear-gradient)>>两篇文章中分别说明。
相关推荐
CSS 设计指南学习小结
使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现。而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果。 CSS3渐变属性 css3中定义了两种渐变类型:线性渐变和径向渐变。线性渐变是指两个或者两个...
所以这篇文章主要介绍CSS背景渐变色和自动全屏适应 背景渐变色 本文只介绍线性渐变 背景渐变相信大家也都不陌生先看下图 小编配的这个色也还可以哈 代码如下 body{ background-image: -webkit-linear-gradient...
我发现css3的背景渐变中的透明度可以解决这个问题(前提是背景渐变的颜色是相近的)。 我在这里简单说一下css3背景渐变中的线性渐变。线性渐变的一般结构是: 复制代码代码如下: background-image: linear
CSS3 之前,必须依赖 Adobe Photoshop 等图形处理软件来制作渐变图,再以背景图片方式添加给元素。 而现在, 使用 CSS就可以创造出各种... ’gradient3′> CSS 规则如下。 CSS Code复制内容到剪贴板 /*为元素盒子添
要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家带来帮助,愿意一起...
网页背景渐变是经常用到的效果,下面用的滤镜,当然在非IE下是没效果的。 一、从上往下渐变 body{FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)...
background-image 不支持CSS3 transition ,而CSS3 gradient渐变作为背景图片存在的时候,下面的CSS设置是不会有过渡效果的。 .gradient { background-image: linear-gradient(to right, olive, green); ...
动画背景渐变 顾名思义,您可以使用CSS3为背景渐变设置动画。我的代码并不完美! 如果您想帮忙,请做! 这会让我开心该软件按“原样”提供,不提供任何形式的明示或暗示担保,包括但不限于适销性,针对特定目的的...
我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 图像。它是css3中的语法,最低兼容IE10 background-image: linear-gradient(to right, #ff9000, #ff5000); direction:用于...
3. 渐变颜色 跟线性渐变一样,一组颜色设定表示渐变过程。没什么好讲的,后面将统一用 [red, #fff 99%, blue] 这个渐变组合,表示从红色变换到白色,最后以一个1%蓝色结束,方便查看边缘。 用法 background-image:...
Tailwind CSS的渐变插件要求此插件需要Tailwind CSS 1.2或更高版本。 如果您的项目使用的是较早版本的Tailwind,则应安装此插件的最新2.x版本( npm install tailwindcss-gradients@2.x )。安装npm install ...
那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券。 CSS3 径向渐变和线性渐变是很相似的,首先来看其...
css-gradient-generator:ZtMCSS背景渐变生成器的源代码
css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之前的线性过度,这个css3属性只支持高版本的浏览器。 //浏览器前缀 background: linear-gradient(red, blue); background: -webkit-linear-...
https://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator A powerful Photoshop-like CSS gradient editor from ColorZilla. CSS渐变背景色实例
这个示例代码就是上面是红色,下面是黑色,渐变色的。 复制代码代码如下: <style type=”text/css”> #round { height: 200px; width:100px; margin:0px auto; background-image: -moz-linear-gradient(top, ...