一 径向渐变
要创建径向渐变,必须定义至少两个颜色的终止点.
径向梯度由其中心定义.
径向渐变的语法:
background:radial-gradient( shape size postion,start-color,color1,color2....,last-color);
shape参数定义形状.如果你没有定义径向渐变的形状,则默认情况下将采用椭圆值(ellipse)
●ellipse(默认):指定椭圆形的径向渐变.
●circle:指定圆形的径向渐变
在下面的例子中,我们没有指定第一个div的径向渐变的shape,但是第二个,我们将该值设定为circle/
css代码:
div.first-ellipse{ height:150px; width:200px; color:#FFF; background:-webkit-radial-gradient(green,yellow,blue);}
div.second-circle{ height:150px; width:200px;color:#fff; background:-webkit-radial-gradient(circle,green,yellow,blue);}
效果如下:
本质上,我们可以使用与background-position css属性指定指定背景图像位置相同的方法来指定椭圆中心位置.
我们可以使用关键字(left,center right或top,center,bottom等),长度值,百分比,像素,em或者组合起来进行定位
在下面的例子中,第一个渐变从左上角(top left或left top效果是一样的)开始;第二个,我们设置了5%的绿色,15%的黄色和60%的蓝色.
css代码:
div.first-top-left{margin:20px; height:150px; width:200px; color:#fff; background:-webkit-radial-gradient(left top,green,yellow,blue);}
div.second-default-postion{ height:150px; width:200px;color:#fff; background:-webkit-radial-gradient(green 5%,yellow 15%,blue 60%);}
注意:类名可以使用"-"来连接,不能使用空格
效果如下:
与线性渐变一样,使用颜色指定一个颜色停止位置,并加上一个可选的停止位置,即(长度或百分比值)
这是一个简单的带有颜色停止的圆形渐变:
css代码:
div.third{margin:20px;background:-webkit-radial-gradient(circle,green 40%,yellow 50%,blue 70%);}
效果如下:
从上边我们可以看出来,不指定color,系统会默认为黑色,不指定height,width,<div>元素的高度将是自动适应的,宽度则是与网页宽度一样.
二 css3 background-size
background-size属性为css添加了新的功能,使我们能够使用长度或百分比来指定背景图像的大小.
css代码:
div.background-size{ height:60px; width:228px; border:2px solid #000; background:url("background.jpg"); background-size:228px 60px;}
效果如下:
格式如下:background-size:width height;(先宽度,再高度)
background-size的属性有两个关键字contain和cover
contain(容纳):缩放图像以适应容器
换句话说,图像会按比例增长或缩小,但宽度和高度不会超过容器的尺寸:
div.contain{margin-top:20px;height:60px; width:228px; border:2px solid #000; background:url("background.jpg") no-repeat;background-size:contain;}
效果如下:
下面是几个小改动:
div.contain{margin-top:20px;height:60px; width:228px; border:2px solid #000; background:url("background.jpg") no-repeat 30% 30%;background-size:contain;}
效果如下:
div.contain{margin-top:20px;height:60px; width:228px; border:2px solid #000; background:url("background.jpg") ;background-size:contain;}
效果如下:
background-size也接受cover关键字.图像缩放以适应整个容器,不过如果长宽比不同,图像将被裁剪.
css代码:
div.contain{margin-top:20px;height:60px; width:228px; border:2px solid #000; background:url("background.jpg")no-repeat 30% ;background-size:cover;}
效果如下:
三 css3 background-clip
background-clip属性指定背景的绘画区域.
该属性有三个不同的值:
border-box:(默认值)背景被绘制到边框的外边缘.
padding-box:背景被绘制到填充的外边缘.
content-box:背景被绘制到内容框中.
css代码:
div.padding-box{ border:2px dotted black; padding: 20px; background:red; color:#fff; background-clip:padding-box; }
div.content-box{ border:2px dotted black; padding:20px; background:red; color:#fff; background-clip:content-box;}
效果如下:
background-clip也适用于背景图像.
css代码:
div.image-content-box{ border:2px solid black;height:6opx;padding:20px; background-image:url("background.jpg") no-repeat; background-clip:content-box;background-size:contain; }
效果如下:
