讓頁面的字型變得更清晰（css實現）和使用css樣式佈局價格劃線

smile發表於2018-01-17
CSS

css3屬性-webkit-font-smoothing

  對字型進行抗鋸齒渲染可以使字型看起來會更清晰舒服。在圖示字型成為一種趨勢的今天，抗鋸齒渲染使用也越來越多。font-smoothing是非標準的CSS定義。它被列入標準規範的草案中，後由於某些原因從web標準中被移除了。但是，我們可以用以下兩種定義進行抗鋸齒渲染

Webkit在自己的引擎中支援了這一效果。

-webkit-font-smoothing它有三個屬性值：

  1. none：對低畫素的文字比較好
  2. subpixel-antialiased：預設值
  3. antialiased：抗鋸齒很好

具體程式碼

.content{
   -webkit-font-smoothing: antialiased;
}

-moz-osx-font-smoothing: inherit | grayscale;這個屬性也是更清晰的作用。

具體程式碼

.content {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

css和html實現樣式佈局橫線

  1. html實現，在HTML標籤中可以使用<s></s>刪除線實現,可以使用標籤實現

    <p>優惠價格：100元，原價：<s>200元</s></p>
<del>186.00</del>

  2. css實現，使用text-decoration:line-through

    <p>優惠價格：80元，原價：<span class="huaxian">220元</span></p>
     .huaxian{text-decoration:line-through}

相關文章