搜尋
首頁web前端css教學12個值得收藏的 CSS 技巧! !

這篇文章要跟大家分享12個值得收藏的 CSS 技巧,大家可以試著記住,在關鍵時可救命喲!希望對大家有幫助!

12個值得收藏的 CSS 技巧! !

1. 使用 Shape-outside 在浮動圖像周圍彎曲文字

它是一個允許設定形狀的 CSS 屬性。它也有助於定義文字流動的區域。 css程式碼:

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

2. 魔法組合

這個小組合其實可以防止你在 HTML 中遇到的大多數佈局錯誤的問題。我們確實不希望水平滑桿或絕對定位的項目做他們想做的事情,也不希望到處都是隨機的邊距和填充。所以這是你們的魔法組合。

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

有時「display:block」沒有用,但在大多數情況下,你會將<a></a><span></span> 視為與其他塊一樣的塊。所以,在大多數情況下,它實際上會幫助你!

3. 分割 HTML 和 CSS

這更像是一種「工作流程」類型的技巧。我建議你在開發時創建不同的 CSS 文件,最後才合併它們。例如,一個用於桌面,一個用於移動等。最後,你必須合併它們,因為這將有助於最大限度地減少您網站的 HTTP 請求數量。

同樣的原則也適用於 HTML。如果你不是在 Gatsby 等 SPA 環境中進行開發,那麼 PHP 可用於包含 HTML 程式碼片段。例如,你希望在單獨的檔案中保留一個「/modules」資料夾,該資料夾將包含導覽列、頁尾等。因此,如果需要進行任何更改,你不必在每個頁面上都對其進行編輯。模組化越多,結果越好。

4. ::首字母

它將樣式套用於區塊級元素的第一個字母。因此,我們可以從印刷或紙本雜誌中引入我們熟悉的效果。如果沒有這個偽元素,我們將不得不創建許多跨度來實現這種效果。例如:

這是如何做到的?程式碼如下:

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

5. 四大核心屬性

CSS 動畫提供了一種相對簡單的方法來在大量屬性之間平滑過渡。良好的動畫介面依賴於流暢流暢的體驗。為了在我們的動畫時間軸中保持良好的性能,我們必須將我們的動畫屬性限制為以下四個核心:

  • 縮放- transform:scale(2)
  • 旋轉- transform:rotate(180deg)
  • #位置– transform:translateX(50rem)
  • #不透明度- opacity: 0.5

邊框半徑、高度/寬度或邊距等動畫屬性會影響瀏覽器佈局方法,而背景、顏色或框陰影的動畫會影響瀏覽器繪製方法。所有這些都會大大降低您的 FPS (FramesPerSecond)。您可以使用這些屬性來產生一些有趣的效果,但應謹慎使用它們以保持良好的性能。

6. 使用變數保持一致

保持一致性的一個好方法是使用 CSS 變數或預處理器變數來預先定義動畫時間。

:root{ timing-base: 1000;}

在不定義單元的情況下設定基線動畫或過渡持續時間為我們提供了在 calc() 函數中呼叫此持續時間的靈活性。此持續時間可能與我們的基本 CSS 變數不同,但它始終是對該數字的簡單修改,並將始終保持一致的體驗。

7. 圓錐梯度

有沒有想過是否可以只用 CSS 建立圓餅圖?好消息是,您實際上可以!這可以使用 conic-gradient 函數來完成。此函數會建立一個由漸變組成的影像,其中設定的顏色過渡圍繞著中心點旋轉。您可以使用以下程式碼行執行此操作:

.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。它是一個偽元素,在瀏覽器級別覆蓋以使用您選擇的顏色替換文字突出顯示顏色。使用遊標選擇內容後即可看到效果。

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

9. 懸停效果

懸停效果通常用於按鈕、文字連結、網站的區塊部分、圖示等。如果您想在有人將滑鼠懸停在其上時更改顏色,只需使用相同的 CSS,但要添加 :hover到它並更改樣式。這是您的方法;

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

當有人將滑鼠懸停在 h2 標籤上時,這會將您的 h2 標籤的顏色從黑色更改為紅色。它非常有用,因為如果您不想更改它,則不必再次聲明字體大小或粗細。它只會更改您指定的任何屬性。

10.投影

新增此屬性可為透明影像帶來更好的陰影效果。您可以使用給定的程式碼行執行此操作。

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

11. 使用放置项居中 Div

居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友,你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素,然后使用如下所示的 place-items 属性。

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

12. 使用 Flexbox 居中 Div

我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题,使用 flexbox 将 div 居中。为此,让我们看一下下面的示例:

<div class="center h-48">
  <div></div>
</div>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

首先,我们需要确保父容器持有圆,即 flex-container。在它里面,我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性:

  • display: flex; 这确保父容器具有 flexbox 布局。
  • align-items: center; 这可确保 flex 子项与横轴的中心对齐。
  • justify-content: center; 这确保 flex 子项与主轴的中心对齐。

之后,我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的,试试吧!

更多编程相关知识,请访问:编程视频!!

以上是12個值得收藏的 CSS 技巧! !的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除
丟失的CSS技巧cohost.org丟失的CSS技巧cohost.orgApr 25, 2025 am 09:51 AM

在這篇文章中,布萊克·莫里(Blackle Mori)向您展示了一些駭客,同時試圖推動同位HTML支持的極限。如果您敢於使用這些,以免您也被標記為CSS罪犯。

光標的下一個CSS樣式光標的下一個CSS樣式Apr 23, 2025 am 11:04 AM

具有CSS的自定義光標很棒,但是我們可以將JavaScript提升到一個新的水平。使用JavaScript,我們可以在光標狀態之間過渡,將動態文本放置在光標中,應用複雜的動畫並應用過濾器。

世界碰撞:使用樣式查詢的鑰匙幀碰撞檢測世界碰撞:使用樣式查詢的鑰匙幀碰撞檢測Apr 23, 2025 am 10:42 AM

互動CSS動畫和元素相互啟動的元素在2025年似乎更合理。雖然不需要在CSS中實施乒乓球,但CSS的靈活性和力量的增加,可以懷疑Lee&Aver Lee有一天會成為一種

使用CSS背景過濾器進行UI效果使用CSS背景過濾器進行UI效果Apr 23, 2025 am 10:20 AM

有關利用CSS背景濾波器屬性來樣式用戶界面的提示和技巧。您將學習如何在多個元素之間進行背景過濾器,並將它們與其他CSS圖形效果集成在一起以創建精心設計的設計。

微笑嗎?微笑嗎?Apr 23, 2025 am 09:57 AM

好吧,事實證明,SVG的內置動畫功能從未按計劃進行棄用。當然,CSS和JavaScript具有承載負載的能力,但是很高興知道Smil並沒有像以前那樣死在水中

'漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的,讓#039;跳上文字包裝:Safari Technology Preview In Pretty Landing!但是請注意,它與在鉻瀏覽器中的工作方式不同。

CSS-tricks編年史XLIIICSS-tricks編年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了,重點介紹了年鑑,最近的播客出現,新的CSS計數器指南以及增加了幾位新作者,這些新作者貢獻了有價值的內容。

tailwind的@Apply功能比聽起來更好tailwind的@Apply功能比聽起來更好Apr 23, 2025 am 09:23 AM

在大多數情況下,人們展示了@Apply的@Apply功能,其中包括Tailwind的單個property實用程序之一(會改變單個CSS聲明)。當以這種方式展示時,@Apply聽起來似乎很有希望。如此明顯

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具