css 小圖標 & iconfont 字體圖標

前言：這是筆者學習以後本身的理解與整理。若是有錯誤或者疑問的地方，請你們指正，我會持續更新！

iconfont 字體圖標

　　咱們的需求中，不少時候會看到一些小的圖形，或者叫圖標，好比天貓網站中：

　　      

　　這些小圖形咱們能夠用圖片代替，一般咱們是把這些圖形切圖以後作成精靈圖（又叫雪碧圖）；

　　精靈圖的原理：把不少小圖片集合成一張大圖片，而後用設置背景圖的位置來顯示圖片；

　　精靈圖的優勢：減小服務器的請求次數，下降服務器壓力；

　　sprites 是一款很好的精靈圖製做工具；

 

　　固然還有其餘的方法能夠製做這些小的圖形，好比上圖中，天貓使用的字體圖標 iconfont；

　　字體圖標，顧名思義，就是一種字體，和字體同樣，是矢量的，咱們也叫矢量圖標，任意放大縮小，都不會失真；

　　網絡中有不少字體圖標庫，這裏我介紹一下 iconfont 的使用：

　　官網：http://www.iconfont.cn/ 

CSS小圖標

　　大師們用 css 製做出了各類純 css 圖形，我這裏就只列舉幾種我用的比較多的；

三角形

　　請看這篇， border三角形陰影(不規則圖形陰影)和多重邊框的製做

菜單（三道槓）

　　用 border 上邊框雙線和下邊框實線，也能夠反着來：

　　

    .menu {
      margin: 100px;
      width: 55px;
      height: 10px;
      border-top: 30px double #f00;
      border-bottom: 10px solid #f00;
      /*用border上邊框雙線和下邊框實線，也能夠反着來*/
    }

 

內凹角

　　大師的方法，點擊這裏，用 css3 屬性徑向漸變 radial-gradient 作。

　　背景圖徑向漸變能夠設置：圓心位置，漸變的大小，漸變的形狀，圓心處的顏色 寬度， ... ，結尾處的顏色寬度;

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    a {
      text-decoration: none;
      cursor: pointer;
    }

    li {
      list-style: none;
    }

    /*清除浮動*/
    .clearfix:before,
    /*:before處理margin上下重疊*/
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      zoom: 1;
    }

    .test {
      margin: 100px 0 0 100px;
    }

    .list {
      margin-left: -20px;
    }

    .content {
      width: 320px;
      background: #7fd6f1;
      min-height: 200px;
    }

    .item .active {
      background: #7fd6f1;
      color: #333;
    }

    .item {
      float: left;
      margin-left: 30px;
    }

    .item a {
      display: block;
      background: #ce4be2;
      width: 80px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      color: #fff;
      border-radius: 10px 10px 0 0;
      position: relative;
    }

    .item a:after {
      content: "";
      display: block;
      position: absolute;
      right: -9px;
      /*不知你們是否發現，在邊緣處實際上是有1px的變化的，弧度到最後不是很天然，這裏咱們其實能夠把位置往裏1px*/
      bottom: 0;
      width: 10px;
      height: 10px;
      background-image: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
      background-image: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
      background-image: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
      background-image: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
      /*背景圖徑向漸變能夠設置：圓心位置，漸變的大小，漸變的形狀，圓心處的顏色 寬度， ... ，結尾處的顏色寬度*/
      /*圓心位置默認爲center，咱們這裏設置圓心爲元素左頂點和右頂點*/
      /*漸變的大小默認爲farthest-corder ,咱們這裏設置的farthest-side*/
      /*漸變的形狀默認爲ellipse（橢圓），咱們這裏得設置成circle（圓形），可是寬高同樣的橢圓不就是圓形麼，so...*/
      /*顏色和寬度的設置，咱們在離元素寬度還有1px的時候變化，因此這裏是10-1=9px；*/
    }

    .item a:before {
      content: "";
      display: block;
      position: absolute;
      left: -9px;
      bottom: 0;
      width: 10px;
      height: 10px;
      background-image: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
      background-image: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
      background-image: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
      background-image: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
    }

    .item .active:after {
      background-image: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
      background-image: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
      background-image: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
      background-image: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
    }

    .item .active:before {
      background-image: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
      background-image: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
      background-image: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
      background-image: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
    }
  </style>
  <div class="test">
    <ul class="list clearfix">
      <li class="item">
        <a href="javascript:;">新聞</a>
      </li>
      <li class="item">
        <a href="javascript:;" class="active">娛樂</a>
      </li>
      <li class="item">
        <a href="javascript:;">體育</a>
      </li>
    </ul>
    <div class="content"></div>
  </div>

 

紅心

　　

    .test {
      display: inline-block;
      margin: 50px;
      height: 100px;
      width: 100px;
      background-color: red;
      transform: rotate(-45deg);
    }

    .test::before,
    .test::after {
      display: block;
      content: "";
      width: 100px;
      height: 100px;
      background-color: red;
      border-radius: 50%;
      margin-top: -50%;
    }

    .test:after {
      margin-left: 50%;
    }

  

回到頂部

<style>
  * {
    padding: 0;
    margin: 0;
  }

  .goTop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    height: 50px;
    width: 50px;
    text-align: center;
    background-color: lightblue;
    border-radius: 20%;
    overflow: hidden;
  }

  .goTop:hover:before {
    top: 50%;
  }

  .goTop:hover .directTop {
    visibility: hidden;
  }

  .goTop:before {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '回到頂部';
    width: 40px;
    color: peru;
    font-weight: bold;
  }

  .directTop {
    visibility: visible;
    display: inline-block;
    margin-top: 20px;
    height: 20px;
    width: 20px;
    border: 3px solid;
    border-color: white transparent transparent white;
    transform: rotate(45deg);
  }
</style>

<body style="height:2000px;">
  <div class="goTop">
    <div class="directTop"></div>
  </div>
</body>

　　還有不少 css 製做的經典圖形，之後再整理吧。

　　其實，css 製做的圖標和圖片代替的圖片都很棒，根據需求吧。我更喜歡字體圖標和圖片的方式，效率更高，簡單。