css揭秘筆記——字體排版

XboxYan 發布于2019-08-29 13:48 / 2749人閱讀

摘要：現實中的文字效果圖版印刷效果空心字效果效果可以說有點差了，所以不適合描邊寬的樣式。

插入換行


    Name:
    zhanglu
    Email:
    zhanglu_helloworld@126.com
    zhanglu_helloworld@126.com
    Location:
    Earth

如何讓上面這一段HTML變成這個樣子：

dt,dd{
    display: inline;
}
dd{
    margin: 0;
    font-weight: bold;
}
dd + dt::before{
    content: "A"; /*除了第一行的dt之外，前面都換行*/
    white-space: pre; /*防止空白符和換行符合并*/ 
}
dd + dd::before{
    content: ","; /*在除了第一個dd外的dd前加逗號*/
    margin-left: -.25em; /*去掉每個dd之間的空格，也就是逗號前的空格*/
    font-weight: normal;
}

文本行的斑馬條紋

padding: 0.5em;
line-height: 1.5;
background: beige;
background-image: linear-gradient(transparent 50%, rgba(0,0,0,.2) 0);
background-origin: content-box; /*很重要，讓條紋和文本行對應起來*/
background-size: auto 3em;

自定義下劃線

/*元素使用行內元素*/
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;/*實現下劃線不穿過字體降部的效果*/

通過這樣方法，還可以畫出虛線、波浪線等效果。

現實中的文字效果 圖版印刷效果

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

background: hsl(210,13%,30%);
color: hsl(210, 13%, 60%);
text-shadow: 0 -1px 1px black;

空心字效果

background: deeppink; 
color: white;
text-shadow: 1px 1px black, 1px -1px black, 
-1px 1px black, -1px -1px black;

text-shadow: 0 0 1px black, 0 0 1px black,  
0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;

text-shadow: 3px 3px black, 3px -3px black, 
-3px 3px black, -3px -3px black;

效果可以說有點差了，所以不適合描邊寬的樣式。

文字外發光效果

.glow{
    background: #203; color: #ffc; 
    transition: 1s;
}
.glow:hover{
    text-shadow: 0 0 .1em , 0 0 .3em;
}

.dizzy{
    background: #203; color: #ffc; 
    transition: 1s;
}
.dizzy:hover{
    color: transparent;
    text-shadow: 0 0 .1em white , 0 0 .3em white;
}

.dizzy{
    background: #203; color: #ffc; 
    transition: 1s;
}
.dizzy:hover{
    filter: blur(.1em);
}

background: steelblue; 
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;

background: hsl(0, 50%, 45%);
color: white;
text-shadow: 1px 1px black, 2px 2px black,  
3px 3px black, 4px 4px black, 
5px 5px black, 6px 6px black, 
7px 7px black, 8px 8px black;

GPU云服務器云服務器中文排版CSS心得 css字體庫 css 服務器字體 css3服務器端字體

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112714.html

css編碼技巧【css揭秘讀書筆記】

摘要：最近在看揭秘，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號，那么同時需要調整行高。那么經過修改后的代碼如下關于使用還是還是百分比，需要根據具體情況來決定。最近在看《css揭秘》，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。希望大家都有所收獲。 css編碼技巧盡量減少代碼重復在實踐中，代碼可維護性的最大要...

Miyang 2019-08-30 12:59 評論0 收藏0
css揭秘筆記——形狀

摘要：把改成，就變成了這樣實現邊框內圓角多重邊框還有下實現多重背景為某一層背景單獨設置類似這樣的屬性等等。裁切路徑方案這種方案，當內邊距不夠寬時，會裁切掉文本。自適應的橢圓（border-radius的用法）單獨指定水平和垂直半徑長寬固定的元素，可以通過指定寬高的一半，變為橢圓形，格式為兩個值用/分開。 width: 100px; height: 80px; border-radi...

dantezhao 2019-08-29 13:47 評論0 收藏0
重學前端學習筆記（十四）--瀏覽器工作解析（四）

摘要：瀏覽器最基本的排版方案是正常流排版。元素非常特別，瀏覽器對的處理是先排入正常流，再移動到排版寬度的最左最右主軸的最前和最后。瀏覽器支持的每一種排版方式，都是按照對應的標準來實現的。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習...

masturbator 2019-08-02 16:17 評論0 收藏0
重學前端學習筆記（十四）--瀏覽器工作解析（四）

摘要：瀏覽器最基本的排版方案是正常流排版。元素非常特別，瀏覽器對的處理是先排入正常流，再移動到排版寬度的最左最右主軸的最前和最后。瀏覽器支持的每一種排版方式，都是按照對應的標準來實現的。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習...

馬忠志 2019-08-26 13:46 評論0 收藏0
重學前端學習筆記（十四）--瀏覽器工作解析（四）

摘要：瀏覽器最基本的排版方案是正常流排版。元素非常特別，瀏覽器對的處理是先排入正常流，再移動到排版寬度的最左最右主軸的最前和最后。瀏覽器支持的每一種排版方式，都是按照對應的標準來實現的。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習...

dingda 2019-08-30 10:52 評論0 收藏0