1. gzyueqian
      13352868059

      粵嵌西安web前端培訓:你可能不知道的CSS小技巧

      更新時間: 2017-07-28 14:30:37來源: 粵嵌教育瀏覽量:5976

      web前端有很多實用有趣的小技巧,粵嵌西安web培訓在這里介紹下CSS上的冷門小技巧。

      隱藏鼠標的惡作劇

      *{

          cursor: none!important;

      }

      簡單的文字模糊效果

      以下兩行簡單的CSS3代碼可達到將文字模糊化處理的目的,效果有點像使用PS的濾鏡

      p {

          color: transparent;

          text-shadow: #111 0 0 5px;

      }

      垂直居中

      當需要垂直居中顯示某個DIV,我們知道CSS中天然有水平居中的樣式text-align:center。唯獨這個垂直居中無解。當然你可以將容器設置為display:table,然后將子元素也就是要垂直居中顯示的元素設置為display:table-cell,然后加上vertical-align:middle來實現,但此種實現往往會因為displaytable而破壞整體布局,西安web前端培訓認為還不如直接用table標簽了呢。

      下面這個樣式利用了translate來巧妙實現了垂直居中樣式,需IE9+

      .center-vertical {

          position: relative;

          top: 50%;

          transform: translateY(-50%);

      }

      多重邊框

      利用重復指定box-shadow來達到多個邊框的效果

      /*CSS Border with Box-Shadow Example*/

      div {

          box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);

          height: 200px;

          margin: 50px auto;

          width: 400px

      }

      實時編輯CSS

      通過設置style標簽的display:block樣式可以讓頁面的style標簽顯示出來,并且加上contentEditable屬性后可以讓樣式成為可編輯狀態,更改后的樣式效果也是實時更新呈現的。此技巧在IE下無效。

      <!DOCTYPE html>

      <html>

          <body>

              <style style="display:block" contentEditable>

               body { color: blue }

              </style>

          </body>

      </html>

      創建長寬比固定的元素

      通過設置父級窗口的padding-bottom可以達到讓容器保持一定的長度比的目的,西安web前端培訓認為這在響應式頁面設計中比較有用,能夠保持元素不變形。

      <div style="width: ; position: relative; padding-bottom: 20%;">

          <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">

              this content will have a constant aspect ratio that varies based on the width.

          </div>

      </div>

      CSS中也可以做簡單運算

      通過CSS中的calc方法可以進行一些簡單的運算,從而達到動態指定元素樣式的目的。

      .container{

      background-position: calc( - 50px) calc( - 20px);

      }

      知道上面提到的小技巧,可能在web前端開發中更加方便,成品得到更好的效果,以上是粵嵌西安web前端培訓帶來的CSS小技巧。

       

       

       

      免費預約試聽課

      亚洲另类欧美综合久久图片区_亚洲中文字幕日产无码2020_欧美日本一区二区三区桃色视频_亚洲AⅤ天堂一区二区三区

      
      

      1. 一级风流片A级国产 | 亚洲精品动漫卡通在线观看 | 亚洲日韩精品第一页一区 | 香蕉网在线日韩直播 | 亚洲制服祙在线 | 伊人久久精品青青草原 |