css3的简单谈谈

CSS3是CSS2的升级版，3只是版本号，它在CSS2的基础上增加了很多强大的新功能，目前主流的浏览器谷歌，火狐等到都支持，ie10以后也全面支持CSS3.

在编写CSS3样式时，不用的浏览器可能需要不同的前缀，它表示该CSS属性或者规则尚未成为W3C标准的一部分，但是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀，但为了更好的向前兼容，前缀是少不了的.

前缀:

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

ie

-o

opera

圆角效果:border-radius搞定

边框阴影:box-shadow搞定

选择器:

 通配符
    eg：*{margin：0；padding:0;}
    #container * { border: red 1px solid ; }
    ID为container 的所有子标签元素都被选中了，并且设置了border。
 # id选择符
       通过id进行引用
        #div { width: 960px; margin: auto; }
        id=”div”
        ID选择器是CSS中效率最高的选择器，使用的时候要保证ID的唯一性。
  . class类选择器
                通过class进行引用
                 .div{width:960px;}
                  class=”div”
 4.a 标签选择器
    eg：a{color:red}
 5. div a 标签组合选择器
         eg:div a{color:red}
6.  div,a 标签并联选择器
          eg:div,a{color:red}
7.a:hover 伪类选择器，最常用的为A标签
          eg：a:hover{colore:red}
          eg：input[type=radio]:checked{color:red}
8. X+y 毗邻元素选择器
           eg：ul + p { color: red; }
           毗邻元素选择器，匹配的是所有紧随X元素之后的同级元素Y
9.X > Y：子元素选择器
           #div > ul { border: 1px solid black; }
<div id="div"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

10.X ~ Y：  兄弟选择符  测试与 +区别
           eg：ul ~ p { color: red; } 
   匹配任何在X元素之后的同级P元素。也就是选择了UL之后的同级所有的元素。


11.X[title]：属性选择器
          eg：a[title] { color: green; }
              匹配a包含title的标签
                        a[href="http://www.baidu.com"]{ color: red; }
                     匹配属性中为http://www.baidu.com的标签
                        a[href*="baidu"] { color: #1f6053; }
                     匹配href中所有含有baidu的标签。   
                         a[href^="http"]
                    匹配以http开头的A标签
                          a[href$=".jpg"]
                     匹配以.jpg结尾的A标签

12.X:not(selector) 选择除了（）中选择器之外的标签元素。
         eg:*:not(p){color:red;}


13.  :root 根元素


       :root 等价于 *{}   html{}  优先级对比
      *>root>html


       14:  :empty 当元素内容为空时被选中


       15:  :nth-child(n)规定元素
               n可以是数字和倍数(2n)
               n+ 表示大于第一个元素
        16：:last-child选取最后一个标签
        17:   :first-child   选取第一个标签

18. :only-child
匹配属于父元素中唯一子元素的p元素:


      css3之前接触到


伪类：
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。


:after  插入元素后端    （必须指定 content：属性  转换为块状元素）
:before 插入元素前段  （必须指定 content：属性  转换为块状元素） 

选择器效率排名：　　
1. id选择器（#myid） 
2. 类选择器（.myclassname） 
3. 标签选择器（div,h1,p） 
4. 相邻选择器（h1+p） 
5. 子选择器（ul < li） 
6. 后代选择器（li a） 
7. 通配符选择器（*）
8. 属性选择器（a[rel='external']） 
9. 伪类选择器
例： div #mydiv的效率 高于 #mydiv div

自定义字体

创建字体
@font-face
{
font-family:自定义名称；
src：url(“”);
}

字体调用


.div{


font-famile:自定义名称；
}

 Word Wrap
对于西方文字来说，浏览器在半角空格或连字符的地方进行换行。因此，浏览器不能给较长的单词换行。
word-wrap 可以用两个属性值normal 和break-word。
normal 值：(默认的) 只在允许在半角空格或连字符的地方换行。
break-word ：文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。


div{      word-wrap: break-word;      }  


浏览器支持：目前得到了所有浏览器的支持。

 rgba(0,0,0,0.8):是对颜色的改变的设置;

所谓RGBA颜色，顾名思意就是R+G+B+A的颜色，再具体点就是RED+GREEN+BLUE+ALPHA的颜色，小写一下就是red+green+blue+alpha的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色。

RGBA颜色归为CSS3属性，其余RGB的区别在于多了个A，也就是Alpha透明度，这是个很好的东西啊，我们以后要实现半透明效果（无论是背景，边框，文字颜色等都可以用半透明实现了），但是，一向不紧不慢，孤芳自赏的IE家族，目前为止还不支持rgba颜色，真是让人哀叹啊！

您可以参见下面各个浏览器对rgba的支持情况一览表，这个表不是我做的，里面把浏览器的祖宗十八代都挖出来了，不得不佩服图表制作者

css3盒子和阴影

 text-shadow 文字阴影
 box-shadow  盒子阴影   兼容性
 text-shadow:Apx Bpx Cpx #xxx;
                         Apx = x轴偏移量                         Bpx = y轴偏移量
              Cpx = 投影长度                         #XXX = 颜色
 box-shadow：Apx Bpx Cpx Dpx #xxx inset
                         Apx = x轴偏移量                         Bpx = y轴偏移量
              Cpx = 模糊距离
                         Dpx = 投影长度
                         #XXX = 颜色
                         inset 内部   默认外部 

css3多重背景图片:

 background: url("1.jpg") no-repeat top right,url("2.jpg") no-repeat 0px 0px;
多图片背景注意 1，没有颜色 2，不要在距离里面加入逗号
3，可以使用 X：left center right  y：top center bottom
                     像素  正负数

background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 padding-box 、content-box或 border-box 区域。
background-size  设置背景图片的大小


语法：
background-size: auto | <长度值> | <百分比> | cover | contain


取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；


2、<长度值>：成对出现如200px 50px


3、<百分比>：0％~100％


4、cover：覆盖，即将背景图片等比缩放以填满整个容器；


5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

渐变效果:

background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue))
渐变的类型? (linear) 
渐变起头的X Y 轴坐标(0 0 – 或者left-top) 
渐变结束的X Y 轴坐标(0 100% 或者left-bottom) 
起头的颜色? (from(red)) 
竣事的颜色? (to(blue)) 
background: -moz-linear-gradient(top, red, blue); 
请注重我们将渐变的类型——linear——放到了属性前缀中了 
渐变从哪里起头 ? (top – 我们也可以使费用数，好比 -45deg) 
起头的颜色? (red) 
竣事的颜色? (blue) 

background：


background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue))
 1,设置渐变方式
 2.开始位置（坐标）
3，结束位置（坐标）
 4.开始颜色
5.结束颜色
线性渐变
-webkit-linear-gradient(A,B,C)
A:开始位置  top  left        或者（度）
B:开始颜色
C:结束颜色          多种颜色 b,c,d,e,f,g


径向渐变：
-webkit-radial-gradient(A A1,B B1,C C1)


A:颜色 A1百分数（不写显示默认）
B:颜色 B1百分数（不写显示默认）
C:颜色 B1百分数（不写显示默认）

 圆角边框 
     -webkit-border-radius: 6px;                -moz-border-radius: 6px; //ff  
             border-radius: 6px   //opera,chrome

不透明度opacity


opacity：0-1 可以为小数| inherit 集成父级




各个浏览器都有自己的私有属性来支持


很不幸的是，你没看见Opera，老版本的Opera并没有什么私有属性可以代替opacity。（新版Opera已经支持opacity）
.opacity{
filter:alpha(opacity=50);       /* IE */


-moz-opacity:0.5;              /* 老版Mozilla */


-khtml-opacity:0.5;              /* 老版Safari */


opacity: 0.5;                  /* 支持opacity的浏览器*/
}

Transform 该属性允许我们对元素进行旋转、缩放、移动或倾斜。




目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，


属性名分别为 -webkit-transform，-moz-transform，-o-transform;


transform属性元素的旋转： 


rotate:旋转
        
           单位 deg     eg：rotate(100deg) 允许负


           rotateX(deg)  沿x轴旋转


           rotateY(deg)  沿y轴旋转

目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，


属性名分别为 -webkit-transform，-moz-transform，-o-transform;


transform属性元素的旋转： 


rotate:旋转
        
           单位 deg     eg：rotate(100deg) 允许负


           rotateX(deg)  沿x轴旋转


           rotateY(deg)  沿y轴旋转

transform属性元素的缩放


scale :缩放
        
           单位 number     eg：scale(2)


           scaleX(deg)  沿x轴缩放


           scaleY(deg)  沿y轴缩放

transform属性元素的倾斜


skew :倾斜
        
           单位 deg eg： skew(deg)允许负数


           skewX(deg)  沿x轴倾斜


           skewY(deg)  沿y轴倾斜

translate :移动
        
           单位 px  eg： translate(px)一个参数（水平方向） 两个参数（水平，垂直）

多方法组合变形




1.旋转-2缩放 3倾斜 4 移动




transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px）

实现一个圆柱体:

<div class="box">
<div class="cube two">
<h4>80%</h4>
<div class="topFace"><div> </div></div>
<div class="leftFace"> </div>
<div class="rightFace"><h5>Hurricane Ditka</h5></div>
</div>
</div>

.cube.two {position: relative;}


.cube h4 {
-moz-transform: rotate(-35deg) skew(30deg, 0deg);color: rgba(255, 255, 255, 0.8);left: 7px;position: absolute;}


.topFace div {
    -moz-transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16); background-color: #F7581E;}


.rightFace,.leftFace { height: 110px; width: 40px;}


.leftFace {-moz-transform: skew(0deg, 30deg); background-color: #6F270D;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.4);  left: -19px;  position: absolute;top: 32px；}


.cube.two .rightFace {
    background-color: #BF4317;-moz-transform: skew(0deg, -30deg);left: 20px; position: absolute;top: 31px;}


.rightFace h5 {left: 1px;position: absolute;top: 10%;}