css3新特性
强大的选择器
允许在标签中指定特定的html元素,而不必使用多余的类、ID、或者js脚本。
高级选择器可以避免在标签中添加大量的class、id属性,从而更加简洁和轻量,更方便于维护。
半透明度效果
RGBA和HSLA不仅可以设定色彩,还能设定元素的透明度。
另外还可以使用opacity属性定义元素的不透明度。
扩展知识:
RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的色彩空间。
alpha通道一般用作不透明度参数。如果一个像素的alpha通道数值为0%,那它就是完全透明的(也就是看不见的),而数值为100%则意味着一个完全不透明的像素(传统的数字图像)。在0%和100%之间的值则使得像素可以透过背景显示出来,就像透过玻璃(半透明性),这种效果是简单的二元透明性(透明或不透明)做不到的。
HSLA(H,S,L,A):
H:
Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:
Saturation(饱和度)。取值为:0.0% - 100.0%
L:
Lightness(亮度)。取值为:0.0% - 100.0%
A:
Alpha透明度。取值0~1之间。
多栏布局
不必使用多个div标签就能实现多栏布局,让文本实现纸质报纸的多栏结构。
多背景图
允许背景属性设置多个属性的值,如background-p_w_picpath、background-repeat、background-size、background-position、background-originand、background-clip等,这样就可以载元素上添加多层背景图片。同时,可以实现圆角、背景重叠等设计复杂的网页效果。
文字阴影
text-shadow在CSS2中就已经存在,但并未被广泛应用。css3重新定义了它,提供了一种新的跨浏览器的方案使文字看起来更醒目。
开放字体类型
@font-face在CSS2中就已经被引入,但没有像其他CSS3那样被广泛使用,这主要是因为字体的授权和版权问题(嵌入的字体很容易从网上下载到)。
圆角
border-radius属性不需要背景图片就能实现圆角的效果。
边框图片
border-p_w_picpath允许在元素的边框上设定图片,使得原本单调的边框样式变得丰富。我们也可以明确定义一个边框应该如何缩放或平铺。
盒子阴影
box-shashow可以为HTML元素添加阴影,而不需要使用额外的标签或背景图片。text-shashow属性能增强设计的细节,但并不影响内容的可读性,也不会影响页面布局。
媒体查询
media query , 可以用于为不同的显示设备定义相适配的样式。因而不用单独为不同的设备编写样式表,也不需要使用javascript脚本来确定用户浏览器的属性和功能,从而实现灵活的、更加流行的智能流体布局,以便满足用户浏览器分辨率的多样化要求。
相关文章