zoukankan      html  css  js  c++  java
  • CSS3笔记(一)

         最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CSS属性或规则尚未成为W3C标准的一部分,尽管现代浏览器已经支持了众多的CSS3属性,但CSS3目前还没得到全面的支持,所以我们需要使用一些特定的声明来提升兼容性,遗憾的是IE8及以下浏览器目前均不支持CSS3。

     1.CSS3标准

    为加强浏览器兼容性,在使用CSS3属性时尽量使用以下特定声明:

       * Gecko(Mozilla/Firefox)浏览器的前缀: -moz-
       * Webkit (Safari/Chrome)浏览器的前缀: -webkit- 

       例如边框圆角属性的写法:

       .round {        

                 border: 5px solid #ccc;       

                -moz-border-radius: 15px;      /* Gecko browsers */       

                -webkit-border-radius: 15px;   /* Webkit browsers */        

                border-radius:15px;            /* W3C syntax */   

       }

     

     2. RGBA颜色模式

         在CSS3之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3中增加RGBA颜色值,并且允许通过对RGBA颜色值设定alpha通道的方法来实现将半透明效果。透明度的取值范围在0到1之间,0是完全不透明,1是颜色完全透明。

    说到透明度,不得不提opacity,也是用来设置透明度的,那它与RGBA的透明度又有什么区别呢?

    1.opacity的透明度是指整个元素的透明度,且我们在父元素中使用了opacity,那么其后代元素都会受其影响。

    2.使用alpha通道对元素设定透明度时,可以单独针对元素的背景色和文字颜色等来指定透明度,不会对后代产生影响。

     

     3. 几个应该关注的CSS3“主流”的属性

    1.圆角(border-radius)

          圆角是最常见的视觉效果之一,按钮和背景边框使用圆角可以使元素变得生动。CSS3之前传统的修饰效果方式是使用图片,不仅影响加载速度而且不易维护,现在只需要设置圆角属性就可以了,核心只有简单的一句:border-radius:10px 10px 10px 10px,只要简单改动参数的值即可灵活改变圆角大小,稍加改动边长和半径可以变换出半圆,对角,四叶草等更多效果。

     

    2.阴影(box-shadow)

         最常见的视觉效果之一,可以使元素变得立体,常用于按钮,input输入框等处。

         核心代码:box-shadow: 5px 5px 5px 0 #ccc;

    前两个参数设置水平和垂直方向位移,第三个是阴影模糊距离,第四个阴影尺寸,阴影颜色,默认为外阴影,如果需要使用内阴影,则需要在背景颜色后面添加inset参数。

     

    3.变形(transform)

    目前transform 属性主要将元素应用2D转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)等变形,分别还有xy之分,比如:rotatex() 和 rotatey() ,以此类推。来提升交互动态效果

    Transform除了能设定变成什么样,还能设定从哪里开始变,也就是变形源点(transform-origin),默认是从元素的最中心点开始的,我们可以通过设定它的值来改变变形源点。

    scale为例,我们可以用以下几种方式来改变元素的大小:

    Transform: scale(1.1);----------整体放大1.1

    Transform: scale(1.1,0.9);------横向放大1.1倍,纵向缩小0.9

    Transform: scaleX(1.1);------仅横向放大1.1倍,纵向不变

    Transform: scaleY(1.1);------横向不变,纵向放大1.1

    Transform-origin: 0 0;--------以左上角为变形源点

     

    4.过渡(transition)

         元素用到变形属性,就不得不提到过渡属性,试想一个DIV旋转45度,如果是在一瞬间发生的,是不是觉得很突兀并毫无美感呢?那如果是在一定的时间区间内平滑地过渡,是不是就是一个类似动画的交互效果呢?

    有了Transition,我们从一种效果转换到另一种效果无需JavaScript或者Flash,只需要一段CSS代码而已。

    transition 属性是一个简写属性,用于设置四个过渡属性:

    1.transition-property-----被改变的属性,如width,opacity,或者直接写all也可以。

    2.transition-duration----过渡时间,以秒为单位,规定完成过渡效果需要多少秒

    3.transition-timing-function----速度效果的速度曲线

    4.transition-delay-----过渡效果何时开始

    例如:

    transition: width 2s ease-in-out;

     

        相信前端工程师对CSS3的这些特性感到激动。它给网页设计师和开发者更多的力量,并且让许多方面都简化不少。现在,我们只需等待所有浏览器支持它。

  • 相关阅读:
    【CITE】C# 如何 实现一个窗体和另一个窗体始终保持相对的位置
    【CITE】5个最优秀的Java和C#代码转换工具
    【EasyX】RGB to Gray
    【Problem solved】发现输入法都是仅桌面使用,无法输入中文时
    【Problem solved】 error C2665: “loadimage”: 2 个重载中没有一个可以转换所有参数类型
    Software Engineering Training in 2016 summer: snake
    hello world!
    数组名和指针
    取得一个给定的地址所存放的值,将给定值存放在给定地址
    搭建hadoop集群 单机版
  • 原文地址:https://www.cnblogs.com/dengyy/p/4286336.html
Copyright © 2011-2022 走看看