在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券. CSS3 径向渐变和线性渐变是很相似的,首先来看其语法: -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> |…

(-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image:-webkit-linear-gradient(red,blue); 或者 background-image: -webkit-gradient(linear,center top,center bottom,from(#ace),to(#f96)); (1)环境准备 #lol { width:30…

语法: 选择器{ background:linear-gradien(线性渐变的方向,起点颜色,终点颜色): } 第一个参数:[可选参数,默认从上到下] 线性渐变的方向:top,bottom,left,right,top left; 第二个和第三个参数:起点颜色和终点颜色,其实中间可以插入更多的颜色,以实现多色渐变效果:支持直接写颜色,或16进制颜色 兼容性问题: 支持chrome和火狐,其他浏览器尚未测试,部分支持IE10, 为了支持chrome和火狐,要分别写上-webkit-,-moz-…

最近迷恋上了钓鱼,可是总钓不到大鱼,所以就画条大鱼来安慰一下我这柔弱的心灵. 先上图: 上面这个就是今晚上我要跟大家分享的小DEMO,我给他起名字就“大鱼吃小鱼之孤单的大鱼”. 转入正题,这条大鱼分为三部分:头,尾巴,眼睛.首先看一下这条鱼的框架,如下面所示,class已经说得很直接了 <div class="fish"> <div class="fisg-head"></div> <div class="fisg…

#grad2 { height: 440px; width: 440px; border-radius: %; background: -webkit-radial-gradient(closest-corner,rgba(,,,%,rgba(,,,%,rgba(,,,%,rgba(,,,%,rgba(,,,%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(closest-corner,rgba(,,,%,rgba(,,,%,rg…

效果看下图: 左右的波浪边框用CSS搞定这个效果.利用CSS radial-gradient() 函数 CSS 语法: background: radial-gradient(shape size at position, start-color, ..., last-color); 直接上代码如下: <div class="coupon"></div> css部分: .coupon { position: relative; width: 400px; hei…

上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用. CSS3径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 一.径向渐变的语法 CSS3的径向渐变已得到众多浏览器引擎的支持,只不过其语法的版本根据不同的引擎浏览器,其语法也不一样…

CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你也可以指定渐变中心.形状(圆形或椭圆形).大小. 默认情况下,渐变的中心是center(表示在中心),渐变的形状是ellipse(表示椭圆形),变天的大小是farthest-corner(表示到最远的角落) 语法: background: radial-gradient(center, shape…

    设置最终形状参数: ellipse circle 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码: radial-gradient(circle closest-side at center, red 50%, blue 100%,white 100%) 径向渐变(radial gradients):从起点到终点颜色从内而外沿进行圆形渐变. 语法 background:radial-gradient(center,shape size,start-color,--,last-c…

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