css 總結2 原

1、背景有關

（1）background-origin：border-box、padding-box、content-box //默認是padding-box

（2）background-image: url(img_flwr.gif), url(paper.gif);

（3）background-position: right bottom, left top;

（4）background-repeat: no-repeat、 repeat;

（5）background-attachment:fixed //固定背景的位置，不隨滾動條滾動

background-origin是css新增屬性，在此基礎上可以用background-position進行偏移。兩者沒有可比性，是配合使用的，不能相互替代。

背景的簡寫：background:url(../../dist/img/xuanzhong.png) no-repeat 5px 5px/25px;

也可以多加一個背景顏色：background:#fd9a97 url(../../dist/img/xuanzhong.png) no-repeat 5px 5px/25px;

也可以設置離右邊的距離：background:#fd9a97 url(../../dist/img/xuanzhong.png) no-repeat right 5px top 5px/25px;

 2、圖片有關

img {
   position:absolute;            //必須
   clip:rect(0px 50px 200px 0px) //裁切方向top, right, bottom, left，始終是距離左邊或者上邊的距離
}

img {
   opacity:0.4;
   filter:alpha(opacity=40); /* For IE8 and earlier */
}

3、邊框有關

border-radius採用的是左上角、右上角、右下角、左下角的順序

border-radius:2em;
等價於：
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 2em 1em 4em / 0.5em 3em;  //  “/”前面是水平方向半徑  ，“/”後面是垂直方向半徑
等價於：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

4、陰影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow    必需。水平陰影的位置。允許負值。    
v-shadow    必需。垂直陰影的位置。允許負值。    
blur        可選。模糊距離。    
spread        可選。陰影的尺寸。    
color        可選。陰影的顏色。請參閱 CSS 顏色值。    
inset        可選。將外部陰影 (outset) 改爲內部陰影。

例子：box-shadow: 10px 10px 5px #888888;

5、2D轉換

     5種方法

• translate()   //相對於自身的位置變換（在應該在的位置上變換）
• rotate()
• scale()
• skew()
• matrix()

 div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px);    /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);        /* Firefox */
}
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}
div
{
transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
}
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
}

translate(x,y)    定義 2D 轉換，沿着 X 和 Y 軸移動元素。
translateX(n)    定義 2D 轉換，沿着 X 軸移動元素。
translateY(n)    定義 2D 轉換，沿着 Y 軸移動元素。

scale(x,y)    定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n)    定義 2D 縮放轉換，改變元素的寬度。
scaleY(n)    定義 2D 縮放轉換，改變元素的高度。

transform:translate(0 ,-50%) rotate(45deg);

6、3D轉換

perspective屬性，設置從何處查看一個元素的角度，瀏覽器支持 ie10之上
多少像素的3D元素是從視圖的perspective屬性定義。這個屬性允許你改變3D元素是怎樣查看透視圖
定義的perspective屬性它是應用在元素的子元素而不是元素本身

perspective-origin 屬性 觀察者的位置，觀察者可移動的區域就是被觀察的物體未變換前的區域範圍 默認值爲50% 50%（即觀察範圍的中心）
transform-style :flat| preserve-3d ,默認是flat preserve-3d意思是被轉換的子元素保存其3D轉換（即如果是preserve-3d 看起來像穿透一個平面，而不是近大遠小的視覺）

7、transtion過渡 

div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}
div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

div:hover { width:300px; }

8、CSS3 @keyframes

 

div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to {background:yellow;}
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 與 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

上面是下面的簡寫
div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 與 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

設置頁面不緩存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

徹底讓IE, FireFox, Chrome等瀏覽器下的a標籤鏈接域鍵盤事件拜拜了。示例代碼如下：

<a class="tab_a tab_on" style="pointer-events:none;">年終獎</a>

文字佔滿容器寬度，兼容性不好

<div>這世間唯有夢想和好姑娘不可辜負！<i></i></div>
div{
  width:500px;
  border:1px solid red;
  text-align: justify;
}
div i{
  display:inline-block;
  width:100%;
}