css3新特性

2023-01-31 01:01:53 新特性 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脚本来确定用户浏览器的属性和功能,从而实现灵活的、更加流行的智能流体布局,以便满足用户浏览器分辨率的多样化要求。



相关文章