目錄
1. 使用 Shape-outside 在浮動圖像周圍彎曲文字
2. 魔法組合
3. 分割 HTML 和 CSS
4. ::首字母
5. 四大核心屬性
6. 使用變數保持一致
7. 圓錐梯度
8. 更改文字選擇顏色
9. 懸停效果
10.投影
11. 使用放置项居中 Div
12. 使用 Flexbox 居中 Div
首頁 web前端 css教學 12個值得收藏的 CSS 技巧! !

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

Nov 09, 2021 am 10:33 AM
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><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

熱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

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

See all articles