記錄工作中常用的CSS3，記錄工作常用CSS3

記錄工作中常用的CSS3，記錄工作常用CSS3

1.邊框圓角,邊框陰影

border-radius:6px; // border-radius:50%; //圓形box-shadow: 1px 1px 1px #666; //box-shadow: h-shadow v-shadow blur spread color inset(outset);  

2.背景圖片的大小

background-size: 100% 100%;  //對背景圖片進行展開，使其完成填充內容地區// background-size:50px 100px;  //對背景圖片進行展開，使其完成填充內容地區

3.文字效果

text-shadow: 5px 5px 5px #FF0000;  //規定文字水平陰影、垂直陰影、模糊距離，以及陰影的顏色word-wrap:break-word; //允許長單詞換行到下一行text-overflow:ellipsis; //顯示省略符號來代表被修剪的文本 配合white-space:nowrap; overflow:hidden;使用

4.字型@font-face用的少，畢竟引入字型檔都是比較大的，得不償失。（非必要情況勿用）

5.元素2D---移動、旋轉、放大/縮小、翻轉；3D---X軸旋轉、Y軸旋轉

transform: translate(50px,100px);  //從其當前位置移動 left toptransform: rotate(30deg);  //順時針旋轉給定的角度(允許負值--逆時針旋轉)。transform: scale(2,4); //尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數transform: skew(30deg,20deg); //翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數transform:matrix(0.866,0.5,-0.5,0.866,0,0); //把所有 2D 轉換方法組合在一起transform: rotateX(120deg);  //圍繞其 X 軸以給定的度數進行旋轉transform: rotateY(130deg);  //圍繞其 Y 軸以給定的度數進行旋轉-ms-transform: ;/* IE 9 */-webkit-transform: ;/* Safari and Chrome */-o-transform: ;/* Opera */-moz-transform: ;/* Firefox */

6.過渡效果transition

div{width:100px;height:100px;background:yellow;transition:width 2s linear 2s, height 2s linear 2s,transform 2s linear 2s;     //一般配合hover使用-moz-transition:width 2s linear 2s, height 2s linear 2s, -moz-transform 2s linear 2s; /* Firefox 4 */-webkit-transition:width 2s linear 2s, height 2s linear 2s, -webkit-transform 2s linear 2s; /* Safari and Chrome */-o-transition:width 2s linear 2s, height 2s linear 2s, -o-transform 2s linear 2s; /* Opera */}div:hover{width:200px;height:200px;transform:rotate(180deg);-moz-transform:rotate(180deg); /* Firefox 4 */-webkit-transform:rotate(180deg); /* Safari and Chrome */-o-transform:rotate(180deg); /* Opera */}

7.動畫@keyframes、animation--例子（輸入框自訂游標動畫）

.custom-cursor {    width: 2px;    height: 45px;    background-color: #2F323A;    position: absolute;    top: 32px;    right: 20px;    animation: cursor 1s linear infinite;    -webkit-animation: cursor 1s linear infinite;    -moz-animation: cursor 1s linear infinite;    -o-animation: cursor 1s linear infinite;}@keyframes cursor {    0% {        opacity: 0    }    50% {        opacity: 0    }    50.1% {        opacity: 1    }    100% {        opacity: 1    }}@-webkit-keyframes cursor {    0% {        opacity: 0    }    50% {        opacity: 0    }    50.1% {        opacity: 1    }    100% {        opacity: 1    }}@-moz-keyframes cursor {    0% {        opacity: 0    }    50% {        opacity: 0    }    50.1% {        opacity: 1    }    100% {        opacity: 1    }}@-o-keyframes cursor {    0% {        opacity: 0    }    50% {        opacity: 0    }    50.1% {        opacity: 1    }    100% {        opacity: 1    }}

8.box-sizing:border-box--------border和padding計算入width之內，其實就是怪異模式了,

設定了border-box後，兩個width=50%並排顯示加邊框的時候不會錯位，

多用於排版問題，很多情況下很實用，簡化了計算位置的問題

box-sizing:border-box;   -moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float: left;