css3进阶教程：css零基础自学教程

一 径向渐变

要创建径向渐变,必须定义至少两个颜色的终止点.

径向梯度由其中心定义.

径向渐变的语法:

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; }

效果如下:

,