懒人听书,有声读物,盗墓笔记txt全集下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

14個實用的 CSS 技巧

在web開發(fā)領(lǐng)域里，有許多布局和效果看起來好像很容易實現(xiàn)，但是動手一做，發(fā)現(xiàn)好像不是那么回事情，為了解決這些看起來容易做起來難的問題，我今天特意整理一些實用的CSS技巧。

創(chuàng)新互聯(lián)專注于德州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供德州營銷型網(wǎng)站建設(shè)，德州網(wǎng)站制作、德州網(wǎng)頁設(shè)計、德州網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造德州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供德州網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

現(xiàn)在，我們就開始今天的內(nèi)容吧。

1.首字母下降

我們可以使用 :first-letter 來刪除文本的第一個字母。

p:first-letter {
 font-size: 200%;
 color: #8A2BE2;
}

:first-letter 選擇器用于指定元素首字母的樣式，它只適用于塊級元素。

在線演示地址：https://codepen.io/OMGZui/pen/oNEMVvN

2. 圖文環(huán)繞

Shape-outside 是一個允許設(shè)置形狀的 CSS 屬性，它還有助于定義文本流動的區(qū)域.

在線演示地址：https://codepen.io/OMGZui/pen/JjpBzGP

3. 使用 :where() 簡化代碼

將相同的樣式應(yīng)用于多個元素時，CSS 可能如下所示：

.page div,
.paget .title,
.page #article {
 color: red;
}

這段代碼看起來可讀性不太友好，這時，:where() 偽類就派上用場了。

:where() 偽類函數(shù)接受一個選擇器列表作為其參數(shù)，并將選擇所有可以通過選擇器列表中的任何規(guī)則選擇的元素。

上面的代碼可以使用 :where() 寫成這樣：

.page :where(div, .title, #article) {
 color: red;
}

這樣，這段代碼是不是看起來干凈多了？

4.透明圖像的陰影

您是否曾經(jīng)嘗試過向透明圖像添加框陰影，只是為了讓它看起來像您添加了邊框？

它的工作方式是 drop-shadow 屬性跟隨給定圖像的 alpha 通道。因此，陰影基于圖像內(nèi)部的形狀，而不是顯示在圖像外部。

在線演示地址：https://codepen.io/OMGZui/pen/bGLjJNO

5.文字打字效果

借助 CSS 動畫功能，我們可以使網(wǎng)頁設(shè)計變得越來越有創(chuàng)意，還可以讓網(wǎng)頁栩栩如生。在此示例中，我們使用動畫和“@keyframes”屬性來實現(xiàn)打字機效果。

具體來說，對于這個演示，我們實現(xiàn)了 steps() 屬性來分割我們的文本動畫。

首先，我們必須指定 steps()，在這個例子中，我們希望設(shè)置動畫的文本的字符長度。

其次，我們使用“@keyframes”來聲明動畫何時開始。例如，如果您在“Typing effect for text”之后寫了另一個詞，除非您更改 CSS 代碼段中的 steps() 數(shù)量，否則動畫將不會運行。

也就是說，這種效果并不是特別新鮮。然而，大多數(shù)開發(fā)人員涌向 JavaScript 庫，盡管使用 CSS 可以實現(xiàn)相同的結(jié)果。

在線演示地址：https://codepen.io/OMGZui/pen/MWQBxqd

6.設(shè)置自定義光標(biāo)

您不太可能需要強迫訪問者進(jìn)入一個獨特的光標(biāo)。至少，不是為了一般的用戶體驗?zāi)康?。不過，關(guān)于 cursor 屬性需要注意的一件事是它允許您顯示圖像。這相當(dāng)于以照片格式顯示工具提示。

一些用例包括能夠比較兩張不同的照片而無需在視口中渲染這些照片。例如。游標(biāo)屬性可用于節(jié)省設(shè)計中的空間。由于您可以將自定義光標(biāo)鎖定到特定的 div 元素，它不會干擾它之外的元素。

在線演示地址：https://codepen.io/OMGZui/pen/abqjMXd

7. 純 CSS實現(xiàn)列表清單

這是動態(tài)列表清單的演示效果例子。

它的工作方式是我們將復(fù)選框輸入類型與 :checked 偽類一起使用。并在 :checked 規(guī)范返回 true 時使用 transform 屬性更改狀態(tài)。

您可以使用這種方法實現(xiàn)各種目標(biāo)。例如，當(dāng)用戶單擊特定復(fù)選框時切換隱藏內(nèi)容。它適用于單選框和復(fù)選框等輸入類型，但也可以應(yīng)用于