CSS3 神器總結

1. 選擇類

 1.1 /* 鼠標選中區域，改變背景/字體顏色 */
        /*遍歷寫法*/
        div::selection {
            background-color: red;
            color: #fff;    /* font-size、font-weight等 設置不起做用 */
        }

        /*全局寫法*/
        ::selection {
            background: #000;
            color: #fff;

2. 文字類

2.1 /* 僞元素選擇器 */
　　　　/* 第一個字母/漢字 */
　　　　　　li::first-letter {
    　　　　　　color:red;
    　　　　　　background-color: yellow;
　　　　　　}

　　　　/* 第一行 */
　　　　　　div::first-line {
    　　　　　　background-color: green;
　　　　　　}
　　　　/*大小寫轉換*/
　　　　　　.tit{
    　　　　　　/*text-transform: capitalize;/!*首字母大寫*!/*/
    　　　　　　/*text-transform: uppercase;/!*全部單詞轉換爲大寫*!/*/
    　　　　　　text-transform: lowercase;/*全部單詞轉換爲小寫*/
　　　　　　}　　

2.2 /*文字多出部分省略號代替 僅適用於單行文本*/
        p{
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow: hidden;
        }

2.3 /*設置文本縱向排列*/
        .title{
            width: 20px;
            writing-mode: tb-rl;
            letter-spacing: 20px;
            text-indent: 30px;
        }

3. 外觀樣式類

3.1 /*設置單選框樣式*/
      input {
              width: 20px;
              height: 20px;
              padding-left: 22px;
              cursor: pointer;
              background: url(images/check.png) no-repeat 2px 1px;
              -webkit-appearance: none;
      }

設置後的樣式： 

3.2 /*設置div寬度100%，兩邊留白(也可設置於高度)*/

　　　 .box{
    　　　　width: -webkit-calc(100% - 50px);
    　　　　width: calc(100% - 50px);
    　　　　height: 300px;
    　　　　margin: 0 auto;
    　　　　background: #ccc;
    　　　　overflow: hidden;
　　　　}

設置後的樣式：

 

 3.3 /*設置光標不能點擊*/
        .btn{
            cursor: no-drop;
        }

   

 

3.4 /* 設置textarea文本框不能拖拽縮放 */
        textarea{
            resize: none;
        }

 

3.5 /* 圓角邊框 */

.box{
    width:100px;
    height:100px;
    border-radius: 10px 20px;
    border: 1px solid red;
}

10px; 一個值的時候即爲設置上下左右邊框
10px 20px; 依次爲：上下邊框 左右邊框
10px 20px 30px; 上邊框 左右邊框 下邊框
10px 20px 30px 40px; 上邊框 右邊框 下邊框 左邊框 

3.6 /* box-shadow 盒子陰影 */      /* text-shadow 文本陰影 */
　　
box-shadow:2px 2px 4px red inset; /* X軸偏移量 Y軸偏移量 陰影距離 陰影顏色 內陰影（能夠不設置內陰影，默認爲外陰影） */
text-shadow 語法和box-shadow 一致

　　

瀏覽器在編譯數字或者字母的時候默認不會自動換行，解決方法：

　　div{
          width: 90px;  border: 1px solid red; word-break: break-all; word-warp: break-word;
   }

 4. 動畫類

4.1 /* 加載loading */
CSS代碼以下：
@keyframes bouncing-loader {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0.1;
                transform: translateY(-1rem);
            }
        }
        .bouncing-loader {
            display: flex;
            justify-content: center;
        }
        .bouncing-loader > div {
            width: 1rem;
            height: 1rem;
            margin: 3rem 0.2rem;
            background: #8385aa;
            border-radius: 50%;
            animation: bouncing-loader 0.6s infinite alternate;
        }
        .bouncing-loader > div:nth-child(2) {
            animation-delay: 0.2s;
        }
        .bouncing-loader > div:nth-child(3) {
            animation-delay: 0.4s;
        }

HTML代碼以下：
<div class="bouncing-loader">
    <div></div>
    <div></div>
    <div></div>
</div>

實現效果以下：　

　

 

 5. transform /*旋轉 變形 */

 transform: rotate(-20deg); /*旋轉*/
 transform: skew(45deg); /*扭曲*/
 transform: scale(0.8); /*縮放*/
 transform: translate(50px, 100px); /*位移*/

 

6. animation /* 動畫 */

HTML代碼以下：

.yun{
 position: absolute;
 left: 0;
 top: 90px;
 background: url(http://gzzta.com.cn/images/gzkdqggjyyj_zt/yun1.png) repeat-x;
 height: 100%;
 width: 300%;
 min-width:1200px;
 -webkit-animation: cloud_one 100s linear infinite;
 -moz-animation: cloud_one 100s linear infinite;
 -o-animation: cloud_one 100s linear infinite;
 animation: cloud_one 100s linear infinite;
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

 
 CSS代碼以下：

 @-webkit-keyframes cloud_one {
            0% {
                left: 0
            }
            100% {
                left: 200px
            }
        }
        @keyframes cloud_one {
            0% {
                left: 0
            }
            50% {
                left: -100%
            }
            100% {
                left: -200%
            }
        }