這篇文章主要講解了“值得收藏的CSS技巧有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“值得收藏的CSS技巧有哪些”吧！

為攸縣等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及攸縣網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站制作、攸縣網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

1. 使用 Shape-outside 在浮動(dòng)圖像周?chē)鷱澢谋?/h3>

它是一個(gè)允許設(shè)置形狀的 CSS 屬性。它還有助于定義文本流動(dòng)的區(qū)域。css代碼：

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

2. 魔法組合

這個(gè)小組合實(shí)際上可以防止你在 HTML 中遇到的大多數(shù)布局錯(cuò)誤的問(wèn)題。我們確實(shí)不希望水平滑塊或絕對(duì)定位的項(xiàng)目做他們想做的事情，也不希望到處都是隨機(jī)的邊距和填充。所以這是你們的魔法組合。

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

有時(shí)“display:block”沒(méi)有用，但在大多數(shù)情況下，你會(huì)將 和 視為與其他塊一樣的塊。所以，在大多數(shù)情況下，它實(shí)際上會(huì)幫助你！

3. 拆分 HTML 和 CSS

這更像是一種“工作流程”類(lèi)型的技巧。我建議你在開(kāi)發(fā)時(shí)創(chuàng)建不同的 CSS 文件，最后才合并它們。例如，一個(gè)用于桌面，一個(gè)用于移動(dòng)等。最后，你必須合并它們，因?yàn)檫@將有助于最大限度地減少您網(wǎng)站的 HTTP 請(qǐng)求數(shù)量。

同樣的原則也適用于 HTML。如果你不是在 Gatsby 等 SPA 環(huán)境中進(jìn)行開(kāi)發(fā)，那么 PHP 可用于包含 HTML 代碼片段。例如，你希望在單獨(dú)的文件中保留一個(gè)“/modules”文件夾，該文件夾將包含導(dǎo)航欄、頁(yè)腳等。因此，如果需要進(jìn)行任何更改，你不必在每個(gè)頁(yè)面上都對(duì)其進(jìn)行編輯。模塊化越多，結(jié)果就越好。

4. ::首字母

它將樣式應(yīng)用于塊級(jí)元素的第一個(gè)字母。因此，我們可以從印刷或紙質(zhì)雜志中引入我們熟悉的效果。如果沒(méi)有這個(gè)偽元素，我們將不得不創(chuàng)建許多跨度來(lái)實(shí)現(xiàn)這種效果。例如：

這是如何做到的？代碼如下：

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}

5. 四大核心屬性

CSS 動(dòng)畫(huà)提供了一種相對(duì)簡(jiǎn)單的方法來(lái)在大量屬性之間平滑過(guò)渡。良好的動(dòng)畫(huà)界面依賴(lài)于流暢流暢的體驗(yàn)。為了在我們的動(dòng)畫(huà)時(shí)間線中保持良好的性能，我們必須將我們的動(dòng)畫(huà)屬性限制為以下四個(gè)核心：

• 縮放 - transform:scale(2)

• 旋轉(zhuǎn) - transform:rotate(180deg)

• 位置 – transform:translateX(50rem)

• 不透明度 - opacity: 0.5

邊框半徑、高度/寬度或邊距等動(dòng)畫(huà)屬性會(huì)影響瀏覽器布局方法，而背景、顏色或框陰影的動(dòng)畫(huà)會(huì)影響瀏覽器繪制方法。所有這些都會(huì)大大降低您的 FPS (FramesPerSecond)。您可以使用這些屬性來(lái)產(chǎn)生一些有趣的效果，但應(yīng)謹(jǐn)慎使用它們以保持良好的性能。

6. 使用變量保持一致

保持一致性的一個(gè)好方法是使用 CSS 變量或預(yù)處理器變量來(lái)預(yù)定義動(dòng)畫(huà)時(shí)間。

:root{ timing-base: 1000;}

在不定義單元的情況下設(shè)置基線動(dòng)畫(huà)或過(guò)渡持續(xù)時(shí)間為我們提供了在 calc() 函數(shù)中調(diào)用此持續(xù)時(shí)間的靈活性。此持續(xù)時(shí)間可能與我們的基本 CSS 變量不同，但它始終是對(duì)該數(shù)字的簡(jiǎn)單修改，并將始終保持一致的體驗(yàn)。

7. 圓錐梯度

有沒(méi)有想過(guò)是否可以只使用 CSS 創(chuàng)建餅圖？好消息是，您實(shí)際上可以！這可以使用 conic-gradient 函數(shù)來(lái)完成。此函數(shù)創(chuàng)建一個(gè)由漸變組成的圖像，其中設(shè)置的顏色過(guò)渡圍繞中心點(diǎn)旋轉(zhuǎn)。您可以使用以下代碼行執(zhí)行此操作：

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

8. 更改文本選擇顏色

要更改文本選擇顏色，我們使用 ::selection。它是一個(gè)偽元素，在瀏覽器級(jí)別覆蓋以使用您選擇的顏色替換文本突出顯示顏色。使用光標(biāo)選擇內(nèi)容后即可看到效果。

::selection {
     background-color: #f3b70f;
 }

9. 懸停效果

懸停效果通常用于按鈕、文本鏈接、站點(diǎn)的塊部分、圖標(biāo)等。如果您想在有人將鼠標(biāo)懸停在其上時(shí)更改顏色，只需使用相同的 CSS，但要添加 :hover到它并更改樣式。這是您的方法；

.m h3{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h3:hover{ 
    color:#f00; 
}

當(dāng)有人將鼠標(biāo)懸停在 h3 標(biāo)簽上時(shí)，這會(huì)將您的 h3 標(biāo)簽的顏色從黑色更改為紅色。它非常有用，因?yàn)槿绻幌敫乃?，則不必再次聲明字體大小或粗細(xì)。它只會(huì)更改您指定的任何屬性。

10.投影

添加此屬性可為透明圖像帶來(lái)更好的陰影效果。您可以使用給定的代碼行執(zhí)行此操作。

.img-wrapper img{
          width: 100% ;
          height: 100% ;
          object-fit: cover ;
          filter: drop-shadow(30px 10px 4px #757575);
 }

11. 使用放置項(xiàng)居中 Div

居中 div 元素是我們必須執(zhí)行的最可怕的任務(wù)之一。但不要害怕我的朋友，你可以用幾行 CSS 將任何 div 居中。只是不要忘記設(shè)置display:grid;對(duì)于父元素，然后使用如下所示的 place-items 屬性。

main{
     width: 100% ;
      height: 80vh ;
      display: grid ;
      place-items: center center;
}

12. 使用 Flexbox 居中 Div

我們已經(jīng)使用地點(diǎn)項(xiàng)目將項(xiàng)目居中。但是現(xiàn)在我們解決了一個(gè)經(jīng)典問(wèn)題，使用 flexbox 將 div 居中。為此，讓我們看一下下面的示例：