你必须知道的CSS3新特性(二)

接着上一篇我们继续讲css3新特性

CSS3 的多列布局(multi-column layout)

CSS3 现在已经可以做简单的布局处理了,这个 CSS3 新特性又一次的减少了我们的 JavaScript 代码量,参考如下代码:

CSS3 多列布局


 .multi_column_style{ 
 -webkit-column-count: 3; 
 -webkit-column-rule: 1px solid #bbb; 
 -webkit-column-gap: 2em; 
 } 
 <div class="multi_column_style"> 
 ................. 
 ................. 
 </div>

这里我们还是以 webkit 内核浏览器为例:

Column-count:表示布局几列。

Column-rule:表示列与列之间的间隔条的样式

Column-gap:表示列于列之间的间隔

清单 9 的代码效果图如图 5:

图 5. 多列布局效果图

图 5. 多列布局效果图

边框和颜色(color, border)

关于颜色,CSS3 已经提供透明度的支持了


 color: rgba(255, 0, 0, 0.75); 
 background: rgba(0, 0, 255, 0.75);

这里的“rgba”属性中的“a”代表透明度,也就是这里的“0.75”,同时 CSS3 还支持 HSL 颜色声明方式及其透明度:

HSL 的透明度

color: hsla( 112, 72%, 33%, 0.68);

对于 border,CSS3 提供了圆角的支持:

圆角案例


border-radius: 15px;
参见下面圆角效果:

Figure xxx. Requires a heading

Figure xxx. Requires a heading

CSS3 的渐变效果(Gradient)

线性渐变

左上(0% 0%)到右上(0% 100%)即从左到右水平渐变:

左到右的渐变


background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
 

这里 linear 表示线性渐变,从左到右,由蓝色(#2A8BBE)到红色(#FE280E)的渐变。效果图如下:

简单线性渐变效果图

图 6. 简单线性渐变效果图

同理,也可以有从上到下,任何颜色间的渐变转换:

各种不同线性渐变效果图

图 7. 各种不同线性渐变效果图

还有复杂一点的渐变,如:水平渐变,33% 处为绿色,66% 处为橙色:

复杂线性渐变


background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE), color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

 这里的“color-stop”为拐点,可见效果图:

复杂线性渐变效果图

图 8. 复杂线性渐变效果图

径向渐变

接下来我们要介绍径向渐变(radial),这不是从一个点到一个点的渐变,而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。来看一个例子:

径向渐变(目标圆半径为 0)


backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));
 

前面“50,50,50”是起始圆的圆心坐标和半径,“50,50,0”蓝色是目标圆的圆心坐标和半径,“color-stop(0.5,red)”是断点的位置和色彩。这里需要说明一下,和放射由内至外不一样,径向渐变刚好相反,是由外到内的渐变。清单 15 标识的是两个同心圆,外圆半径为 50px,内圆半径为 0,那么就是从黑色到红色再到蓝色的正圆形渐变。下面就是这段代码的效果:

径向渐变(目标圆半径为 0)效果图

图 9. 径向渐变(目标圆半径为 0)效果图

如果我们给目标源一个大于 0 半径,您会看到另外一个效果:

径向渐变(目标圆半径非 0)


backgroud: -webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));
 

这里我们给目标圆半径为 10,效果图如下:

径向渐变(目标圆半径非 0)

图 10. 径向渐变(目标圆半径非 0)

您可以看到,会有一个半径为 10 的纯蓝的圆在最中间,这就是设置目标圆半径的效果。

现在我再改变一下,不再是同心圆了,内圆圆心向右 20px 偏移。

径向渐变(目标圆圆心偏移)


backgroud: -webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));
 

这里我们给目标圆半径还是 10,但是圆心偏移为“70,50”(起始圆圆心为“50,50”)效果图如下:

径向渐变(目标圆圆心偏移)

图 11. 径向渐变(目标圆圆心偏移)

想必您明白原理了,我们可以做一个来自顶部的漫射光,类似于开了盏灯:

径向渐变(漫射光)


backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));
 

其效果如下:

径向渐变(漫射光)

图 12. 径向渐变(漫射光)

CSS3 的阴影(Shadow)和反射(Reflect)效果

首先来说说阴影效果,阴影效果既可用于普通元素,也可用于文字,参考如下代码:

元素和文字的阴影


.class1{ text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); } .class2{ box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); }
 

设置很简单,对于文字阴影:表示 X 轴方向阴影向右 5px,Y 轴方向阴影向下 2px, 而阴影模糊半径 6px,颜色为 rgba(64, 64, 64, 0.5)。其中偏移量可以为负值,负值则反方向。元素阴影也类似。参考一下效果图:

元素和文字的阴影效果图

图 13. 元素和文字的阴影效果图

接下来我们再来谈谈反射,他看起来像水中的倒影,其设置也很简单,参考如下代码:

反射


.classReflect{ -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51))); }
 

设置也很简单,大家主要关注“-webkit-box-reflect: below 10px”,他表示反射在元素下方 10px 的地方,再配上渐变效果,可见效果图如下:

反射效果图

图 14. 反射效果图

CSS3 的背景效果

CSS3 多出了几种关于背景(background)的属性,我们这里会简单介绍一下:

首先:“Background Clip”,该属确定背景画区,有以下几种可能的属性:

* background-clip: border-box; 背景从 border 开始显示 ;

* background-clip: padding-box; 背景从 padding 开始显示 ;

* background-clip: content-box; 背景显 content 区域开始显示 ;

* background-clip: no-clip; 默认属性,等同于 border-box;

通常情况,我们的背景都是覆盖整个元素的,现在 CSS3 让您可以设置是否一定要这样做。这里您可以设定背景颜色或图片的覆盖范围。

其次:“Background Origin”,用于确定背景的位置,它通常与 background-position 联合使用,您可以从 border、padding、content 来计算 background-position(就像 background-clip)。

* background-origin: border-box; 从 border. 开始计算 background-position;

* background-origin: padding-box; 从 padding. 开始计算 background-position;

* background-origin: content-box; 从 content. 开始计算 background-position;

还有,“Background Size”,常用来调整背景图片的大小,注意别和 clip 弄混,这个主要用于设定图片本身。有以下可能的属性:

* background-size: contain; 缩小图片以适合元素(维持像素长宽比)

* background-size: cover; 扩展元素以填补元素(维持像素长宽比)

* background-size: 100px 100px; 缩小图片至指定的大小 .

* background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸 .

最后,“Background Break”属性,CSS3 中,元素可以被分成几个独立的盒子(如使内联元素 span 跨越多行),background-break 属性用来控制背景怎样在这些不同的盒子中显示。

* background-break: continuous; 默认值。忽略盒之间的距离(也就是像元 素没有分成多个盒子,依然是一个整体一 样)

* background-break: bounding-box; 把盒之间的距离计算在内;

* background-break: each-box; 为每个盒子单独重绘背景。

这种属性让您可以设定复杂元素的背景属性。

最为重要的一点,CSS3 中支持多背景图片,参考如下代码:

多背景图片


div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x; }
 

此为同一元素两个背景的案例,其中一个重复显示,一个不重复。参考一下效果图:

多背景图片

图 15. 多背景图片

相关文章

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
发表新评论