css3新特性

发布时间：2019-08-09 09:58:14编辑：auto阅读（1359）

    强大的选择器


        允许在标签中指定特定的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脚本来确定用户浏览器的属性和功能，从而实现灵活的、更加流行的智能流体布局，以便满足用户浏览器分辨率的多样化要求。



关键字：

上一篇： python 32bit? 64bit?

下一篇： M3A的问题