CSS3新特性應(yīng)用之字體排印

2016/12/19 8:32:56 閱讀：1848 發(fā)布者：1848

一、插入換行

~：表示同輩元素之后指定類型的元素，如;elm1 ~ elm2表示,elm1之后的所有elm2元素，
且elm1與elm2都是在同一個父級元素。
+：表示同輩元素的兄弟元素。
\A：一個空白換行符
解決方案：
- 在dd與dt相鄰的dt上的子元素前面加入一個空白換行符
- 在相鄰的dd與dd之間，加入一個逗號
示例代碼：

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
        dt, dd{ 
            display: inline; 
        } 
        dd{ 
            font-weight: bold;  
            margin: 0px 0px 0px 5px; 
        } 
        dd + dt::before{ 
            content: ’\A’; 
            white-space: pre; /*html默認(rèn)換行符與其相鄰的其他空白符合并,pre表示不合并空白符*/ 
        } 
        dd + dd::before{ 
            content: ’,’; 
            margin-left: -5px; 
        } 
    </style> 
</head> 
<body>  
    <dt>Name</dt><dd>Sam Long</dd>   
    <dt>Email</dt><dd>[email protected]</dd><dd>[email protected]</dd>  
    <dt>Location</dt><dd>CQ</dd>  
</body>

二、文本行的斑馬條紋

背景尺寸是行高的2倍
注意em單位
white-space：設(shè)置或檢索對象內(nèi)空格的處理方式
- normal：默認(rèn)處理方式
- pre：用等寬字體顯示預(yù)格式化的文本，空白字符會被瀏覽器保留
- nowrap：文本不會換行，直到遇到<br>標(biāo)簽為止
- pre-wrap：用等寬字體顯示預(yù)格式化的文本，空白字符會被瀏覽器保留，文本會換行
- pre-line：保持換行符，合并空白符
示例代碼：

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
        .wrap{   
            padding: .5em; 
            line-height: 1.5; 
            background: hsl(20, 50%, 95%); 
            background-image: linear-gradient( 
                            rgba(120,0,0,.1) 50%, transparent 0); 
            background-size: auto 3em; 
            background-origin: content-box; 
            font-family: Consolas, Monaco, monospace; 
        } 
        .wrap code{ 
            font: inherit; 
        } 
    </style> 
</head> 
<body>  
<pre class="wrap"> <code> while(true){ 
    i++; 
    if(i>10){ 
        break; 
    }else{ 
        console.log(i); 
    } 
}</code></pre>  
</body>

三、調(diào)整tab的寬度

注意Ide是否應(yīng)用的tab替換為space的功能，必須要關(guān)閉。
利用tab-size指定tab的大小
示例代碼

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
        pre, code{ 
            font-family: monospace; 
        } 
        pre{ 
            white-space: pre; 
            background: red; 
            tab-size: 2; 
            display: block; 
        } 
    </style> 
</head> 
<body> 
<pre><code> 
while(true){ 
    var d = new Date(); 
} 
</code></pre> 
</body>

四、自定義下劃線

linear-gradient的角度，默認(rèn)是180deg
text-shadow實現(xiàn)陰影效果，做出左右陰影偏移
存在兼容性問題，chrome50版本沒有下劃線顯示
示例代碼:

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style>  
        body { 
            font: 250%/1.6 Baskerville, Palatino, serif; 
        } 

        a { 
            background: -webkit-linear-gradient(gray, gray) no-repeat; 
            background-size: 100% 1px; 
            background-position: 0 1.02em; 
            text-shadow: .05em 0 white, -.05em 0 white; 
/*水平左、右偏移一個背景色的陰影，用于降級字母的下半處理*/ 
        } 

        p:nth-child(2) a { 
            background: -webkit-linear-gradient(180deg, gray 66%, transparent 0) repeat-x;
 /*0,180deg都是可以的*/ 
            background-size: .2em 2px; 
            background-position: 0 1em; 
        } 
    </style> 
</head> 
<body> 
    <p>The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.</p> 
    <p>The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.</p> 
</body>

五、現(xiàn)實中的文字效果

text-shadow實現(xiàn)的效果不能退化，如果瀏覽器不支持則看不見，可以用filter實現(xiàn)，
但支持得更好（但可以退化樣式）
text-shadow設(shè)置多個值，并按遞增規(guī)則偏移，可以制作出立體效果
凸版文字
- 字體太小text-shadow屬性產(chǎn)生的效果不可接受
- 示例代碼：

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
        body{ 
            font: 110%/1.6 Baskerville, Palatino, serif; /*字體過小表現(xiàn)不出樣式*/ 
        } 
        .wrap{ 
            width: 200px; 
            background: hsl(210, 13%, 60%); 
            color: hsl(210, 13%, 30%); 
            padding: .1em; 
            text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8); 
        } 
        .wrap02{ 
            margin-top: 10px; 
            width: 200px; 
            background: hsl(210, 13%, 60%); 
            color: hsl(210, 13%, 30%); 
            padding: .1em; 
            text-shadow: 0 -1px 1px hsla(0, 0%, 100%, .8); 
        } 
    </style> 
</head> 
<body> 
    <div class="wrap"> 
        <span>根據(jù)協(xié)議，四省（市）將深化教育綜合改革合作交流.</span> 
    </div> 
    <div class="wrap02"> 
        <span>根據(jù)協(xié)議，四省（市）將深化教育綜合改革合作交流.</span> 
    </div> 
</body>

其他效果示例代碼：

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
        .wrap{ 
            text-align: center; 
            font-size: 38px; 
            width: 200px; 
            background: deeppink; 
            color: white; 
            text-shadow: 1px 1px black, -1px 1px black, -1px -1px black, 1px -1px black; 
        } 
        .wrap02{ 
            margin-top: 10px; 
            font-size: 38px; 
            width: 200px; 
            text-align: center; 
            background: #203; 
            color: #ffc; 
            transition: 1s; 
        } 
        .wrap02:hover{ 
            text-shadow: 0 0 .1em, 0 0 .3em; 
            color:transparent; 
        } 
        .wrap03{ 
            margin-top: 10px; 
            width: 200px;  
            font-size: 38px; 
            text-align: center; 
            color: white; 
            background: hsl(0,50%,45%); 
            text-shadow: 0 1px hsl(0, 0%, 85%), 
                         0 2px hsl(0, 0%, 65%), 
                         0 3px hsl(0, 0%, 45%), 
                         0 4px hsl(0, 0%, 25%), 
                         0 5px hsl(0, 0%, 5%), 
                         0 5px 10px black; 
        } 
        .wrap04{ 
            margin-top: 10px; 
            width: 200px;  
            font-size: 38px; 
            text-align: center; 
            color: white; 
            background: hsl(0,50%,45%); 
            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; 
        } 
    </style> 
</head> 
<body> 
    <div class="wrap"> 
        <span>CSS</span> 
    </div> 
    <div class="wrap02"> 
        <span>CSS</span> 
    </div> 
    <div class="wrap03"> 
        <span>CSS</span> 
    </div> 
    <div class="wrap04"> 
        <span>CSS</span> 
    </div> 
</body>

六、自定義復(fù)選框

系統(tǒng)自帶復(fù)選框美化
- 利用css3提供的:checked偽類選擇器實現(xiàn)
- 寬、高、對齊等設(shè)置單位最好用em，讓按鈕變得更為靈活
- 示例代碼：

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
        input[type="checkbox"]{ 
            display: none;     
        } 
        input[type="checkbox"] + label::before{ 
            content: ’\a0’; /*不換行空格*/ 
            display: inline-block; 
            background: silver; 
            border-radius: .2em; 
            margin-right: .2em; 
            width: .8em; 
            height: .8em;  
            line-height: .65em; 
            text-indent: .15em; 
        } 
        input[type="checkbox"]:checked + label::before{ 
            content: ’\2713’; 
            background: yellowgreen; 
        } 
    </style> 
</head> 
<body> 
    <input type="checkbox" id="anesome"/> 
    <label for="anesome">anesome</label> 
</body>

開關(guān)按鈕的實現(xiàn)
- 偽類選擇器 + 修飾label元素實現(xiàn)
- 示例代碼：

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
        input[type="checkbox"]{ 
            display: none;     
        } 
        input[type="checkbox"] + label{  
            display: inline-block; 
            padding: .3em .5em; 
            background: #ccc; 
            border: 1px solid rgba(0, 0, 0, .2); 
            background-image: linear-gradient(#ddd,#bbb); 
            text-align: center; 
            border-radius: .3em; 
            box-shadow: 0 1px white inset; 
            text-shadow: 0 1px 1px white; 
        }  
        input[type="checkbox"]:checked + label{ 
            box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset; 
            border-color: rgba(0, 0, 0, .3); 
            background: #bbb; 
        } 
    </style> 
</head> 
<body> 
    <input type="checkbox" id="anesome"/> 
    <label for="anesome">anesome</label> 
</body>

上一篇 CSS的一些零碎總結(jié)

下一篇絕對定位元素的水平垂直居中的方法

【微信掃一掃】

亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999

CSS3新特性應(yīng)用之字體排印

一、插入換行

二、文本行的斑馬條紋

三、調(diào)整tab的寬度

四、自定義下劃線

五、現(xiàn)實中的文字效果

六、自定義復(fù)選框

文章分類

相關(guān)新聞

熱門標(biāo)簽