background:linear-gradient(to right,#7f06a8,#a02bc2,#7f06a8)

偶然的机会发现的这个东东 这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了 并没有发现他说的高科技 但是一个东西深深地吸引了我 就是我下面要说的动画  这个好像不能放视频 我就简单的描述一下吧 比如 这个效果 鼠标触发之后 从左到右渐变颜色 这个效果我已经放在了" jquery插件库 " 如果你想看效果 可以直接去这个网站查看 网址:http://www.jq22.com/webqd4197 直接上代码 html代码 css代码 如果你完成了上面两步 那么恭喜你你成功的完成

1,有利于代码维护,有利于使用debug进行调试打断点.2,后面三个都存在计算,所以分开写最好.背景复合属性最好的写法,background:#abcdef url() no-repeat 50px 100px scroll;background-clip:border-box/padding-box/content-box;background-origin:border-box/padding-box/content-box;background-size:cover/contain/len

随着网站的越来越普及,CSS3和HTML5必将成为网站前端发展的主流方向,特别是在移动端,高端浏览器给前端工程师们带来了无以言表的体验. 通俗的来讲,CSS3可以说是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的.以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来.这些模块包括:盒子模型.列表模块.超链接方式 .语言模块 .背景和边框 .文字特效 .多栏布局等.那么,今天我首先要在马海祥博客上跟大家分享的就是CSS3的Gradient

CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等).WebKit(Safari.Chrome等).Opera(Opera浏览器).Trident(讨厌的IE浏览器). 本文照常忽略IE不管,我们主要看看在 Mozilla.Webkit

一.CSS3 渐变(Gradients):CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Rad

一.CSS3 背景图像区域 background-clip(指定背景绘制区域) ackground-clip: border-box / padding-box / content-box; /*没有padding的时候,content-box和padding-box效果一样*/ 兼容性:IE9+.FireFox.Chrome.Safari.Opera 二.CSS3 背景图像定位 background-position (背景定位) background-position: px / % ...

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器).WebKit(熟悉的有Safari.Chrome等浏览器).Opera(Opera浏览器).Trident(讨厌的IE浏览器).本文照常忽略IE不管,我们主要看看在Mozilla.Webkit.Opera下的应用,当

本来想先瞎扯些什么,然后又不知道讲什么的好,那就直接进入正题吧. 参考资料: Using CSS gradients  (以及该页面内的大部分链接页面的资料) 首先区分下,平常给的纯色background,指的是background-color属性,而渐变色所指向的是background-image属性,是作为背景图像处理的. 从渐变的形式分为2种:线性渐变(直线扩散)和径向渐变(从圆心扩散). 线性渐变: linear-gradient | repeating-linear-gradient

一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景在边框及边框以内的区域可见 b) padding-box 背景在padding及padding以内的区域可见 c) content-box 背景在content区域可见 二.背景原点: background-origin:padding-box|border-box|content-box; 作用:

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+); <point>:[ left | right ]? [ top | bottom ]? || <a

https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的详细解释. 在项目中,有很多地方都用到了背景线性渐变.如果在移动端还可以适当使用CSS3这个属性 css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, #f

CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等). WebKit(Safari.Chrome等).Opera(Opera浏览器).Trident(讨厌的IE浏览器). 本文照常忽略IE不管,我们主要看看在 Mozilla.Webk

CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.background-origin.background-size,这三个属性描述如表1: 表1  CSS3新增背景属性 1  多背景 CSS3允许设置多个背景图片,每个背景用逗号隔开,每个背景图片占一层,层的上下显示按照在CSS中写的顺序来定,最先写的背景在最上层. 多背景的格式如下: background: ur

背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多背景 background-origin:指定对象的背景图像定位的原点. background-clip:指定对象的背景图像向外裁剪的区域. background-image:linear-gradient()线性渐变 background-image:repeating-linear-gradie

转自:http://www.cnblogs.com/rainman/p/5113242.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 本文只讲述表准的语法,要想兼容更多浏览器可以到网上搜索出很多解决方案,逻辑基本一致. 1.语法 background: li

css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置背景有很多属性可以利用.将在下文中详细解释这些属性的用法. css属性定义背景效果 background    简写属性,将背景属性设置在一个声明中 background-color  背景颜色 background-image  背景图片 background-position  背景图像定位,设

项目中需要实现如下效果的布局 也就是一个左右下角带圆角,上方不带圆角的白色背景矩形,而且只有左.右和下边框,颜色为浅灰色. 当然,切一个.9图片作为背景也能实现,但是能用代码实现的还是尽量用代码实现,因为图片过多一个消耗内存,另一个还增加apk大小. 这种效果可以通过layer-lsit来实现,在drawable文件夹下面建一个xml文件,具体代码如下: <?xml version="1.0" encoding="utf-8"?> <layer-l

CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一．线性渐变 linear-gradient背景颜色的渐变功能 CSS3提供了linear-gradient属性实现背景颜色的渐变功能.在以前,这种效果必须采用图片才能实现的.首先,我们先看一下它的样式表,如下: linear-gradient(方位,起始色,末尾色)                  方位          可选参数,

从上到下 #grad {  background: -webkit-linear-gradient(red, blue);  background: -o-linear-gradient(red, blue);  background: -moz-linear-gradient(red, blue);  background: linear-gradient(red, blue);} 从左到右 #grad {  background: -webkit-linear-gradient(left,