經常使用的css屬性

 經常使用的css屬性，總結以下：

 /*去掉textarea右下角的幾個小點*/

textarea{
　　resize:none;
}

 /*去掉input 文本框邊框*/

input[type="text"]：focus{

　　outline:none;

}

/*表示表格的兩邊框合併爲一條*/

table{
　　border-collapse:collapse;
}

/*P標籤的text-indent:2em; 前面空兩格*/
p{
　　text-indent:2em;
}

/*去掉標籤默認的樣式*/

 -webkit-appearance : none ;

/*文本去掉下劃線，添加下劃線，文字中間添加橫線，文本頂部添加橫線*/

text-decoration:none;blink;underline;line-through;overline;

a標籤的一些處理問題

a:link:鏈接日常的狀態

a:visited:鏈接被訪問過以後

a:hover:鼠標放到鏈接上的時候

a:active:鏈接被按下的時候

/*css三角形*/

div{

　　width:0;

　　height:0;

　　border:20px solid red;

　　border-color:transparent transparent transparent red;

}

 /* html5中placeholder屬性設置顏色*/

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

    color: red;

}

input:-moz-placeholder, textarea:-moz-placeholder {

    color: red;

}

input::-moz-placeholder, textarea::-moz-placeholder {

    color: red;

}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {

    color: red;

}

/*input 文本框中   設置placeholder居中   的樣式*/

input::-ms-input-placeholder{text-align: center;}

input::-webkit-input-placeholder{text-align: center;}

input::-moz-input-placeholder{text-align: center;}

 

/*使用position:absolute 設置水平，垂直居中*/
position:absolute;
left:50%; //left設置爲50%，以元素的左側進行的水平居中，設置left偏移量爲50%。
top:50%;//top設置爲50%，以元素的上側進行的垂直居中，設置top偏移量爲50%。
margin-top:-100px;
margin-left:-100px;
width:200px;
height:200px;
z-index:1;

/*多行文本溢出時添加.....(僅僅對於webkit瀏覽器起做用)*/

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;//顯示的行數

    -webkit-box-orient: vertical;

/**

 * 爲何要清除浮動？ 
 * 對於元素子類中存在的浮動元素，會對當前元素形成影響，沒法撐起其元素的高度，影響頁面佈局效果

 * 清除浮動經常使用的幾種方式：
 *　　1.給父類元素直接設置height:100px 高度
 * 　   2.給父類元素添加僞元素 :after  例：div:after{content:'';display:block;clear:both;}

 *       3.在子類浮動元素的後面添加一個清除浮動的標籤： <div style="clear:both;display:block;"></div>

 **/

/*在使用display:inline-block的時候，會出現兩個相鄰元素之間出現間隔，清除的方法是給父級div加上font-size:0;*/

/*css設置input標籤爲disabled的樣式*/

input:disabled{

    border :  1px  solid  #DDD ;

    background-color :  #F5F5F5 ;

    color : #ACA899 ;

}

//IE 8 -

input[disabled]{

    border :  1px  solid  #DDD ;

    background-color :  #F5F5F5 ;

    color : #ACA899 ;

}

//IE 6  Using Javascript to add CSS class  "disabled"

* html input.disabled{

    border :  1px  solid  #DDD ;

    background-color :  #F5F5F5 ;

    color : #ACA899 ;

}

/*css3動畫*/

.test{

    opacity: 0;

    text-align:center;

    font-size:26px;

    -webkit-animation:animations2 5s ease-in-out 1s forwards;

    -moz-animation:animations2 5s ease-in-out 1s forwards;

    animation:animations2 5s ease-in-out 1s forwards;//動畫名,動畫執行時間,動畫頻率,動畫延遲時間,動畫循環次數(執行一次或者無線循環)

}

 

@-webkit-keyframes animations2{

    0%{opacity:0;}

    40%{opacity:.8;font-size: 26px;}

    45%{opacity:.3;font-size: 24px;}

    50%{opacity:.8;font-size: 20px;}

    55%{opacity:.3;font-size: 16px;}

    60%{opacity:.8;font-size: 14px;}

    100%{opacity:0;font-size: 12px;}

}

@-moz-keyframes animations2{

    0%{opacity:0;}

    40%{opacity:.8;font-size: 26px;}

    45%{opacity:.3;font-size: 24px;}

    50%{opacity:.8;font-size: 20px;}

    55%{opacity:.3;font-size: 16px;}

    60%{opacity:.8;font-size: 14px;}

    100%{opacity:0;font-size: 12px;}

}

@keyframes animations2{

    0%{opacity:0;}

    40%{opacity:.8;font-size: 26px;}

    45%{opacity:.3;font-size: 24px;}

    50%{opacity:.8;font-size: 20px;}

    55%{opacity:.3;font-size: 16px;}

    60%{opacity:.8;font-size: 14px;}

    100%{opacity:0;font-size: 12px;}

}

 

/*css3過渡動畫*/

.test{

  border-radius: 100px;

    -webkit-border-radius: 100;

    -webkit-appearance: none;

    -webkit-transition:transform .5s ease-in;

       -moz-transition:transform .5s ease-in;

            transition:transform .5s ease-in;//過渡動畫時間 過渡動畫頻率

}

.test:hover{

  -webkit-transform: rotate(360deg);

                trasform: rotate(360deg);

}

/*內容垂直居中*/

.target{

 　　display: flex;

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        flex-direction:column;

        justify-content:center;

       -webkit-box-pack: center;

       -webkit-justify-content: center;

       -ms-flex-pack: center;

        justify-content: center;

}

//默認去掉滾動條

::-webkit-scrollbar {

       width: 0;

}

css資料

http://www.codeyyy.com/css/css3/border/index.html

 

css3動畫

http://h5bp.github.io/Effeckt.css/#0

 

有趣的flash 動畫效果

http://abowman.com/google-modules/tree-frog/