成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css字體相關(guān)樣式的處理

mdluo / 1202人閱讀

摘要：連字符斷行實現(xiàn)文本兩端對齊的方式，可以使用，它接收三個值和。效果如下插入換行上面這種格式的實現(xiàn)，看似簡單有很讓人頭疼，這種格式的形式由于和都是塊級元素，導(dǎo)致了名字和值都會換行，有一種很好的處理辦法字符中代表換行符。

連字符斷行

實現(xiàn)文本兩端對齊的方式，可以使用hyphens，它接收三個值none、manual 和auto。manual是它的初始值，將hyphens設(shè)置成auto可以實現(xiàn)。為了確保它奏效，需要在HTML標(biāo)簽的lang屬性中指定合適的語言。

效果如下：

插入換行

上面這種格式的實現(xiàn)，看似簡單有很讓人頭疼，這種格式的DOM形式：


  
Name:

  
Lea Verou

  
Email:

  
lea@verou.me

  
lea@verou.me

  
Location:

  
Earth

由于dt和dd都是塊級元素，導(dǎo)致了名字和值都會換行，有一種很好的處理辦法：

dt, dd {
    display: inline;
}

dd + dt::before {
    content: "A";
    white-space: pre;
}

dd + dd::before {
    content: ", ";
    font-weight: normal;
}

Unicode字符中A代表換行符。通過設(shè)置 white-space: pre，保留源代碼中的這些空白符和換行

文本行的斑馬條紋的實現(xiàn)

主要思路是：在CSS 中用漸變直接生成背景圖像，并且用em 單位來設(shè)定背景尺寸，這
樣背景就可以自動適應(yīng)font-size 的變化了。
具體的實現(xiàn)如下：

    urlParams.gitName = record.gitName;
    for (let item in record) {
       if (record[item] == currentId) {
           urlParams.stage = item;
       }
    }
    localStorage.setItem("urlParams", JSON.stringify(urlParams));

.code {
    padding: .5em;
    line-height: 1.5;
    tab-size: 4; /* 接受一個數(shù)字或者一個長度值控制代碼縮進(jìn) */
    background: beige;
    background-size: auto 3em;
    background-origin: content-box;
    background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

效果如下：

美化&符號

在寫頁面時，有時會出現(xiàn)經(jīng)過美化過的&符號，如果用src多帶帶指定某一種字體的話會增加http請求的次數(shù)，通過local這個函數(shù)可以解決這個問題，它可以指定本地字體的名稱。

在使用font-face將local這個函數(shù)引入時，需要指定要渲染的某一個特定的字符，就需要使用unicode-range，它只在@font-face 規(guī)則內(nèi)部生效，它并不是一個CSS屬性

unicode-range它的語法是基于“Unicode碼位”，因此需要知道字符的十六進(jìn)制碼位，通過
"&".charCodeAt(0).toString(16);（返回26） 得到&的十六進(jìn)制編碼

@font-face {
    font-family: Ampersand;
    src: local("Baskerville-Italic"),
    local("GoudyOldStyleT-Italic"),
    local("Palatino-Italic"),
    local("BookAntiqua-Italic");
    unicode-range: U+26;
}
h1 {
    font-family: Ampersand, Helvetica, sans-serif;
}

最終的效果如下：

自定義下劃線的方法

處理css默認(rèn)樣式下劃線的方法可以使用background-image及其相關(guān)的屬性，通過它設(shè)置漸變達(dá)到效果。
具體的實現(xiàn)如下：

 span {
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1.15em;
    /* 如果下劃線在遇到字母時會自動斷開避讓,通過設(shè)置text-shadow模擬*/
    text-shadow: .05em 0 white, -.05em 0 white;
  }

效果如下：

文字凸起、空心、發(fā)光的等效果的實現(xiàn)

實現(xiàn)凸版印刷字體的效果

使用投影的效果達(dá)到，具體的實現(xiàn)如下：

  .div {
    background: hsl(210, 13%, 60%);
    color: hsl(210, 13%, 30%);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
  }

最終的效果：

空心字效果的實現(xiàn)

方法是使用用text-shadow 屬性的擴(kuò)張參數(shù)就可讓投影變大，看起來就像給文字勾邊了一樣；或者是使用svg

用text-shadow:

div {    
    color: white;
    text-shadow: 1px 1px black, -1px -1px black,
                 1px -1px black, -1px 1px black;
}

最終效果：

用svg的方法：


    
      
      CSS
    

 h1 {
    font: 500%/1 Rockwell, serif;
    background: deeppink;
    color: white;
  }
  h1 text {
    fill: currentColor;
  }
  h1 svg { 
    overflow: visible
  }
  h1 use {
    stroke: black;
    stroke-width: 6;
    stroke-linejoin: round;
  }

效果如下：

svg的實現(xiàn)方式雖然語法復(fù)雜，但是它的視覺效果卻是最好的。

文字外發(fā)光的效果
實現(xiàn)的方法就是使用重疊的text-shadow即可，不需要考慮偏移量，顏色也只需跟文字保持一致。

.hi {
    background: #203;
    color: #ffc;
    text-shadow: 0 0 .1em, 0 0 .3em;
  }

效果如下：

文字凸起的效果

.css3d {
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0,0%,85%),
    0 2px hsl(0,0%,80%),
    0 3px hsl(0,0%,75%),
    0 4px hsl(0,0%,70%),
    0 5px hsl(0,0%,65%);
    0 5px 10px black;
}

效果如下：

環(huán)形文字的實現(xiàn)
使用svg實現(xiàn)


   
       
        
          Each data point or cell of a cube is the
        
    

  .circular {
    width: 300px;
    height: 300px;
    margin: 3em auto 0;
  }
  .circular svg {
    display: block;
    overflow: visible;
  }
  .circular path { 
    fill: none; 
  }

效果如下：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111947.html

相關(guān)文章

  • webpack4 系列教程(十一)：字體文件處理

    摘要：或者來我的小站看更多內(nèi)容課程介紹和資料本節(jié)課源碼所有課程源碼本節(jié)課的代碼目錄如下本節(jié)課的內(nèi)容如下準(zhǔn)備字體文件和樣式如上面的代碼目錄所示，字體文件和樣式都放在了目錄下。編寫按照上面的配置，打包好的和均位于文件夾下。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步《webpack4 系列教程(十一)：字體文件處理》原文地址?；蛘邅砦业男≌究锤鄡?nèi)容：godbmw.com...

    UnixAgain 評論0 收藏0

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來指定顏色。針對多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見元素和理解 html常見元素分類 head區(qū)元素：（不會在頁面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

    hqman 評論0 收藏0

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來指定顏色。針對多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見元素和理解 html常見元素分類 head區(qū)元素：（不會在頁面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

    YacaToy 評論0 收藏0

  • CSS編碼規(guī)范

    摘要：代碼風(fēng)格文件建議文件使用無的編碼。解釋編碼具有更廣泛的適應(yīng)性。示例空格強(qiáng)制選擇器與之間必須包含空格。示例字號強(qiáng)制需要在平臺顯示的中文內(nèi)容，其字號應(yīng)不小于。示例響應(yīng)式強(qiáng)制不得單獨編排，必須與相關(guān)的規(guī)則一起定義。 轉(zhuǎn)載：原地址 1 前言 CSS作為網(wǎng)頁樣式的描述語言，在百度一直有著廣泛的應(yīng)用。本文檔的目標(biāo)是使CSS代碼風(fēng)格保持一致，容易被理解和被維護(hù)。 雖然本文檔是針對CSS設(shè)計的，...

    flyer_dev 評論0 收藏0

  • iconfont實踐小結(jié)

    摘要：所以實現(xiàn)小圖標(biāo)時雪碧圖跟圖標(biāo)字體會在一個網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時，且太復(fù)雜圖標(biāo)無法實現(xiàn)請往下看開發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計本文對應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<