&quot;探秘CSS3：打造視覺盛宴-深度解析漸變、陰影與遮罩技

秘CSS3：打造視覺盛宴——深度解析漸變、陰影與遮罩技術

隨著Web技術的不斷演進，CSS3以其強大的視覺表現力，賦予網頁設計無限可能。本文將深入剖析CSS3中的三大視覺魔法工具——漸變、陰影與遮罩技術，通過詳盡的理論講解和豐富的實例演示，助您掌握這些技巧，打造出令人眼前一亮的網頁視覺盛宴。

一、魅力漸變：色彩的藝術流動

1. 線性漸變：平滑過渡，簡約而不簡單

css
background: linear-gradient(to right, #ff6b6b, #ff9595);

上述代碼創建了一個從左至右，由#ff6b6b漸變到#ff9595的線性漸變背景。您可以調整方向（如`to bottom`、`45deg`等）、添加更多顏色停止點來豐富漸變效果。

2. 徑向漸變：聚焦視覺中心，營造立體感

css
background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);

此例中，我們創建了一個以元素中心為圓心，從#f7f7f7漸變到#dcdcdc的圓形徑向漸變背景。通過調整形狀（如`ellipse`）、大小（如`closest-side`）和位置（如`top left`），可以靈活定制徑向漸變樣式。

二、立體陰影：賦予元素生命與空間感

1. 盒子陰影（Box Shadow）：輕松實現三維效果

css
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

上述代碼為元素添加了一個向右下偏移2px、模糊半徑為8px、顏色為rgba(0, 0, 0, 0.3)的陰影。理解盒陰影的基本參數（水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色）并靈活運用，即可創造出豐富的陰影效果。

2. 文本陰影（Text Shadow）：讓文字躍然紙上

css
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.?), -1px -1px 2px rgba(255, 255, 255, 0.5);

此處為文本設置了兩個陰影：一個向右下偏移、顏色較深的陰影，以及一個向左上偏移、顏色較淺的陰影，形成微妙的浮雕效果。通過疊加多個陰影、調整參數，您可以創作出各種獨特的文本樣式。

三、神奇遮罩：掌控元素可見度與透明度

1. CSS Mask：精細裁剪，展現獨特視界

css
mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);

該代碼為元素應用了一個從左至右的線性漸變遮罩，使得元素左側和右側各有一半區域透明。您還可以使用`mask-mode`、`mask-repeat`、`mask-position`等屬性進一步調整遮罩行為。

2. CSS Clip Path：創意裁剪，打破常規布局

css
clip-path: polygon(0 0, 100% 0, .png);

上述代碼使用多邊形裁剪路徑，將元素頂部裁剪成尖角形狀。您還可以使用橢圓、圓形、內切/外切矩形等多種路徑類型，甚至借助SVG路徑實現更為復雜的裁剪效果。

四、實戰案例：融合三大技術，打造視覺盛宴

案例一：動態漸變按鈕

css
/* 定義CSS變量 */
:root {
  --start-color: #ff6b6b;
  --end-color: #ff9595;
}

.button {
  background: linear-gradient(to right, var(--start-color), var(--end-color));
  transition: background 0.3s ease-in-out;
}

.button:hover,
.button:focus {
  --start-color: #ff9595;
  --end-color: #ff6b6b;
}

利用CSS變量、偽類和動畫，創建一個點擊時背景漸變顏色動態變化的按鈕：

案例二：懸浮卡片與陰影交互

css
.card {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.card:hover {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
}

結合盒子陰影與:hover偽類，實現鼠標懸停時卡片陰影增強的交互效果：

案例三：遮罩疊加文字特效

css
.image-overlay {
  background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
  background-blend-mode: multiply;
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

利用遮罩與多重背景，創造出文字在圖片上淡入淡出的特效：

結語

CSS3的漸變、陰影與遮罩技術，如同網頁設計的調色板、光影魔術師和剪刀手，賦予網頁視覺表現無盡的可能性。通過深入理解并熟練運用這些技術，您將能打造出既美觀又富有創意的網頁界面，為用戶帶來極致的視覺體驗。持續探索、實踐與創新，您的每一個作品都將成為Web世界中的一道獨特風景。

言

最近在業務上遇到了一個問題是要將頁面打印輸出成pdf文件，通過點擊一個按鈕，就能夠將頁面寫在一個pdf上，并下載下來，需要保證pdf的內容具有很好的可讀性。

經評估要實現這個需求，一種可行的方案是將HTML頁面轉為PDF，并實現下載。通過技術調研，最終的方案確定為通過html2canvas + jspdf這兩個庫來實現，通過使用html2canvas提供的方法，將頁面元素轉為base64圖片流，然后將其插入jspdf插件中，實現保存并下載pdf。

html2canvas + jspdf方案是前端實現頁面打印的一種常用方案，但是在實踐過程中，遇到的最大問題就是分頁截斷的問題：當頁面元素超過一頁A4紙的時候，連續的頁面就會因為分頁而導致內容被截斷，進而影響了pdf的可讀性。

由于網上關于分頁截斷的解決思路比較少，所以特意將此次的解決方案記錄下來。

使用 JSPDF 和 html2canvas 創建簡單的 PDF文件

首先，我們開始使用 JSPDF 和 html2canvas 生成一個簡單的 PDF文件。

創建一個 JSPDF 實例

創建一個 JSPDF 實例，設置頁面的大小、方向和其他參數。參考官網可以寫一個很簡單的實例

var doc = new jsPDF({
  orientation: 'landscape',
  unit: 'in',
  format: [4, 2]
}

doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

生成一個pdf文件，并且在文件中寫入一定內容，其實JSPDF這個庫就能做到。

但是很多業務場景下，我們的目標內容會更復雜，而且還要考慮樣式，所以最好的方式是引入html2canvas這個庫，將頁面元素轉換成base64數據，然后貼在pdf中(使用addImage方法），這樣就能保證頁面的內容。

引入了html2canvas庫后，我們更多關注是利用現成組件庫、框架或者原生html和css實現更復雜的頁面內容。

引入 html2canvas

使用 html2canvas 捕捉 HTML 內容或特定的 HTML 元素，并將其轉換為 Canvas。其中，html2canvas 函數的主要用法是：

html2canvas(element, options);

element： 要渲染為 canvas 的 HTML 元素。這可以是一個 DOM 元素，也可以是一個選擇器字符串，表示需要渲染的元素。
options（可選）： 一個包含配置選項的對象，用于定制 html2canvas 的行為。

以下是一些常見的配置選項：

allowTaint（默認值: false）： 是否允許加載跨域的圖片，默認為 **false**。如果設為 true，html2canvas 將嘗試加載跨域的圖片，但在某些情況下可能會受到瀏覽器的限制。
backgroundColor（默認值: #ffffff）： canvas 的背景顏色。
useCORS（默認值: false）： 是否使用 CORS（Cross-Origin Resource Sharing）來加載圖片。如果設置為 **true**，則 html2canvas 將嘗試使用 CORS 來加載圖片。
logging（默認值: false）： 是否輸出日志信息到控制臺。
width 和 height： canvas 的寬度和高度。如果未指定，則默認為目標元素的寬度和高度。
scale（默認值: window.devicePixelRatio）： 縮放因子，決定 canvas 的分辨率。

下面是一個簡單的demo，可以看到html2canvas能夠將dom元素轉化為一張base64圖片，將鼠標選中元素，可以感受到圖片和文字的不同。

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

Untitled.png

將html2canvas轉化的圖片放到pdf中

這一步我們需要使用JSPDF 的addImage方法，其語法如下：

addImage(imageData, format, x, y, width, height, alias, compression)

imageData - 要添加的圖像數據。可以是圖像的 URL、圖像的 base64 編碼字符串或圖像的二進制數據
format - 圖像的格式。可以是 "JPEG"、"PNG" 或 "TIFF"。
x - 圖像在 PDF 文檔中的 x 坐標。
y - 圖像在 PDF 文檔中的 y 坐標。
width - 圖像的寬度。
height - 圖像的高度。
alias - 圖像的別名。此別名可用于在 PDF 文檔中引用圖像。
compression - 圖像的壓縮級別。可以是 "NONE"、"FAST" 或 "SLOW"。

下面是一串示例代碼：

import jsPDF from 'jspdf';

export default function addImageUsage() {
  const doc = new jsPDF();
  const imageData = 【替換成base64數據流】;
  doc.addImage(imageData, 'png', 0, 0, 10, 10);
  doc.addImage(imageData, 'png', 100, 100, 10, 10);
  doc.addImage(imageData, 'png', 200, 200, 10, 10);

  drawNet(doc);

  doc.save('output.pdf');
}

const drawNet = (doc) => {
  const gap = 10;
  const start = [0, 0];
  const end = [595.28, 841.89];

  // 所有橫線
  for (let i = start[0]; i < end[0]; i = i + gap) {
    doc.line(i, 0, i, end[0]);
  }
  // 所有縱線
  for (let j = start[1]; j < end[1]; j = j + gap) {
    doc.line(0, j, end[1], j);
  }
};

此示例將在 PDF 文檔（默認是A4紙大小，寬高為[595.28, 841.89]像素）的 (10, 10) 、(100, 100) 、(200, 200) 坐標處，添加一張png 圖像。圖像的寬度和高度將分別為 10 和 10 像素，為了了解pdf中的坐標系統，此示例還在pdf文檔中生成了間距為10px的網格系統。

JSPDF 和 html2canvas結合起來用

了解了上面的三個關鍵點，接下來我們將這三個步驟串聯起來，實現一個基本的html→pdf的方案。大致步驟如下：

寫一個基本html頁面
創建jspdf實例
獲取頁面的dom節點，使用html2canvas將其轉化為base64數據流
將base64數據流裝載到jspdf提供的addImage方法中
保存pdf

基于這5個步驟，可以實現基本的頁面打印。

import html2canvas from 'html2canvas';
import jsPDF, { RGBAData } from 'jspdf';

// 將元素轉化為canvas元素
// 通過 放大 提高清晰度
// width為內容寬度
async function toCanvas(element: HTMLElement) {
  if (!element) return { width: 0, height: 0 };

  // canvas元素
  const canvas = await html2canvas(element, {
    scale: window.devicePixelRatio * 2, // 增加清晰度
    useCORS: true // 允許跨域
  });

  // 獲取canvas轉化后的寬高
  const { width: canvasWidth, height: canvasHeight } = canvas;

  // 轉化成圖片Data
  const canvasData = canvas.toDataURL('image/jpeg', 1.0);

  return { width: canvasWidth, height: canvasHeight, data: canvasData };
}

/**
 * 生成pdf(A4多頁pdf截斷問題， 包括頁眉、頁腳 和 上下左右留空的護理)
 */
export async function generatePDF({
  /** pdf內容的dom元素 */
  element,

  /** pdf文件名 */
  filename
}) {
  if (!(element instanceof HTMLElement)) {
    return;
  }

  const pdf = new jsPDF();

  // 一頁的高度， 轉換寬度為一頁元素的寬度
  const {
    width: imageWidth,
    height: imageHeight,
    data
  } = await toCanvas(element);

  // 添加圖片
  function addImage(
    _x: number,
    _y: number,
    pdfInstance: jsPDF,
    base_data:
      | string
      | HTMLImageElement
      | HTMLCanvasElement
      | Uint8Array
      | RGBAData,
    _width: number,
    _height: number
  ) {
    pdfInstance.addImage(base_data, 'JPEG', _x, _y, _width, _height);
  }

  addImage(0, 0, pdf, data!, imageWidth, imageHeight);

  return pdf.save(filename);
}

多頁：比例縮放+循環移位

通常，在我們的實踐中，會發現2個問題：

生成的pdf內容與實際的頁面元素比例不一致
頁面內容超出一頁pdf的高度，但是生成的pdf只有一頁，沒有展示全部的頁面信息

這兩個問題的解決方案是等比例縮放+循環移位：

等比例縮放

通過比例縮放，實現頁面內容等比例展示在pdf文檔中

令頁面元素的寬高為x, y（轉化成canvas圖片的寬高），pdf文檔的寬高為w, h。因為高度可以通過加頁延伸，所以可以按照寬度進行縮放，縮放后的圖片高度可以通過下列公式計算

循環移位

如果頁面的高度超出了pdf文檔的高度，即y > h，使用addPage方法添加一頁即可。但是在新的一頁中，我們的圖片內容的高度需要調整。

假設y = 2 * h，這意味我們需要兩頁才能完整得展示頁面內容。在一頁pdf中，圖片在起始位置插入即可，即

 PDF.addImage(pageData, 'JPEG', 0, 0, x, y)// 注意x,y 是縮放后的大小

在第二頁pdf中，圖片的縱向位置需要調整一頁pdf的高度，即

 PDF.addImage(pageData, 'JPEG', 0, -h, x, y)// 注意x,y 是縮放后的大小

通過循環計算剩余高度，然后不停調整縱向位置移動base64的圖片位置，可以解決多頁的問題。

分頁截斷的挑戰

盡管 JSPDF 和 html2canvas 是功能強大的工具，但是他們也有很多槽點，比如得手動分頁，手動處理分頁截斷的問題。等你實踐到這一步，就開始面臨分頁截斷的問題，類似的問題也有網友在Github上提出，但是底下依然沒有很好的解決思路。

好在掘金上有人分享了一個不錯的方法：

jsPDF + html2canvas A4分頁截斷完美解決方案（含代碼 + 案例） - 掘金

概括一下，其處理分頁截斷的原理就是在使用addImage之前，將html進行分頁，通過維護一個高度位置數據，來記錄每次循環迭代addImage的位置。

從高到低遍歷維護一個分頁數組pages，該數組記錄每一頁的起始位置，如：pages[0] 對應第一頁起始位置，pages[1] 對應第二頁起始位置

Untitled2.png

接下來我們重點討論如何將頁面進行切割，然后生成pages這個數組。

假設頁面的高度是1500，pdf寬高是[500, 900]，如果不用處理分頁截斷的問題，我們可以想到第一頁（0-900）是用來承載頁面從高度為0到900的信息；

第二頁（900-1800）是用來承載頁面從高度900到1500的，所以pages數組為[0, 900]。

如果要處理分頁截斷呢，這時候就需要計算頁面元素的距離pdf文檔起始位置的高度h1，以及該元素的內部高度h2，通過這兩個高度來判斷這個元素要不要放在下一頁，防止截斷，示意圖如下：

Untitled4.png

如果h1 + h2 > 頁面高度，這時候說明這個元素不處理的就會被分頁截斷，所以應該要把這個元素放到第二頁去渲染，這就意味著pages記錄的數據要變化，示意圖如下，可以看到pages[1]我們往上調整了，比第二頁pdf的起始位置更高。

Untitled5.png

說明渲染第二頁pdf的時候，要從h1開始渲染，pages數組為[0, h1]，解釋為第一頁pdf渲染頁面高度區域為0-900, 第二頁pdf渲染html高度區域為h1-1500。注意到第一頁渲染的時候到尾部的時候，會有部分內容和第二頁頭部內容重合。因為h1到900這部分的內容肯定會渲染，這部分內容一直都是頁面元素，我們改變pages[1]的值的原因只是創建一個副本，讓頁面看起來內容沒有被截斷。

為了解決這個問題（為了美觀），我們用填充一塊白色區域遮掉它！此處使用jspdf的rect和setFillColor方法，把重合的區域遮白處理。

pdf.setFillColor(255, 255, 255);
pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');

如何獲得h1和h2

上面我們談到了h1和h2，其中h1是元素盒子的上邊距到打印區域的高度（比例縮放后的高度），h2是元素盒子的內部高度。

計算h1: getBoundingClientRect方法

const rect = contentElement.getBoundingClientRect() || {};
const topDistance = rect.top;
return topDistance;

Untitled6.png

計算h2：offsetHeight方法

Untitled7.png

值得注意的是，因為打印區域的html元素不一定是從窗口頂部開始，所以為了計算實際的h1(元素到打印區域的頂部距離），可以采用這樣的方法：

用getBoundingClientRect方法計算元素到窗口頂部的距離
循環打印之前將pages信息針對第一個元素進行一個高度校準。

// 對pages進行一個值的修正，因為pages生成是根據根元素來的，根元素并不是我們實際要打印的元素，而是element，
  // 所以要把它修正，讓其值是以真實的打印元素頂部節點為準
  const newPages = pages.map((item) => item - pages[0]);

在線demo演示和源代碼

上述即是在實現前端頁面生成pdf的過程中遇到的問題，以及解決思路。

為了更直觀得感受效果，本文也給出了不同場景（單頁、多頁、多頁截斷、自定義頁眉頁腳、橫向）下的pdf生成效果，可以通過此鏈接體驗：https://pdf-demo-phi.vercel.app/

此demo的源代碼如下：pdf-demo

與現有文章不同的是，本倉庫的代碼特點在于：

支持設置pdf打印的方向，比如橫向
修正了高度計算問題，解決了多出一個空白頁問題。掘金那篇文章計算元素高度時候沒有減去容器距離頂部高度，所以導致很多新手使用那份代碼的時候，會發現自己的頁面頂部被裁剪到了，原因就是這個
支持自定義頁眉頁腳
支持擴展自定義分頁方法，如果遇到復雜的組件，可以自定擴展邏輯計算高度

作者:燕平

來源:微信公眾號:Goodme前端團隊

出處:https://mp.weixin.qq.com/s/-1nA-VI6kmgqHRcYs_NZFA

文：https://blog.csdn.net/TriDiamond6/article/details/105222289

5. 圖片視差效果

這個超級炫酷的效果在官網中非常的受歡迎，這種效果可以給用戶帶來視覺沖擊，也給我們的網站帶來了活力。普通的網頁圖片會跟隨著網頁一起滑動，但是視覺差效果圖就會固定在底部，只有圖片所在的窗口上的元素會移動。

僅使用CSS

對你沒有看錯，這個效果只需要用到CSS就能輕易的實現！我們只要使用一個CSS背景圖的屬性background-attachment: fixed，這個特性會把背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動。

實現理論：

一、在含有圖片的元素中加入background: url()和background-size: cover（第二個屬性適用于定義圖片為封面，可以讓圖片大小自動適應，在很大的屏幕也會顯示完整的圖片）
二、然后附加固定背景圖的屬性background-attachment: fixed
三、最后給這個元素加入一個高度height: 100%或者任意的高度height: 400px

就那么簡單哦！不用懷疑，馬上上代碼，大家都可以自己去試試哦！

HTML

<div class="wrapper">
   <div class="parallax-img"></img>
   <p>這里填寫一堆文字就可以了，盡量多一點哦</p>
</div>

CSS

.wrapper {  
  height: 100wh;
}
.parallax-img {  
  background-attachment: fixed;  
  background-position: center;  
  background-repeat: no-repeat;  
  background-size: cover;  
  height: 100%;  
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {  
  font-size: 20px;  
  padding: 1.5rem 3rem;  
  min-height: 1000px; 
  // 當你的文字內容不夠，也能撐出足夠的高度來看到效果，當然如果你文字足夠多，就不需要了
}

知識總結

background-attachment: fixed — 把背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動。
background-size: cover — 可以讓圖片大小自動適應，在很大的屏幕也會顯示完整的圖片。

使用CSS + JavaScript

有些童鞋可能沒有被這個震撼到或者還是覺得不夠刺激。那我們再來一個高級例子，上面的例子在滑動的時候圖片是固定死的。如果我們加上JavaScript的助力，我們可以讓窗口的圖片緩慢的跟隨這個頁面滑動，使得效果更有動力和更有沖擊感。

實現理論

首先講一下排版，因為我們需要在我們滑動頁面的時候使用JavaScript偏移圖片，所以我們需要給圖片一個CSS屬性讓我們可以讓圖片可以根據一個速度來往上或者往下移動。這個例子里面我們讓所有圖片包裹在一個div里面，class名為block。這個div給予相對定位屬性position: relative，這個時候我們就可以在里面加入圖片，然后讓圖片絕對定位position: absolute在這個div盒子里面。

但是圖片是可能很大的，我們需要把圖片不超出我們定義個盒子，所以我們的div同時也給予了overflow: hidden和一個高度height: 100%。這樣圖片超出div盒子就會被隱藏。

布局代碼如下：

<div class="block">  
  <img    src="https://unsplash.it/1920/1920/?image=1005"    data-speed="-1"    class="img-parallax"  />  
    <h2>視差速度 -1</h2>
</div><div class="block">  
<img    src="https://unsplash.it/1920/1920/?image=1067"    data-speed="1"    class="img-parallax"  />  
  <h2>視差速度 1</h2>
</div>

html, body{  
  margin: 0;  
  padding: 0;  
  height: 100%;  
  width: 100%;  
  font-family: 'Amatic SC', cursive;
}
.block{  
  width: 100%;  
  height: 100%;  
  position: relative;  
  overflow: hidden;  
  font-size: 16px;
}
.block h2{  
  position: relative;  
  display: block;  
  text-align: center;  
  margin: 0;  
  top: 50%;  
  transform: translateY(-50%);  
  font-size: 10vw;  
  color: white;  
  font-weight: 400;
}
.img-parallax {  
  width: 100vmax;  
  z-index: -1;  
  position: absolute;  
  top: 0;  
  left: 50%;  
  transform: translate(-50%,0);  
  pointer-events: none
}

實現這個布局，在你滑動的時候，圖片是不會移動的。因為最后一步就是加入JavaScript的輔助，讓圖片活起來。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">
  </script><script>
// 循環獲取每一個圖片元素
$(".img-parallax").each(function () {  
  var img = $(this);  
  var imgParent = $(this).parent();  
  function parallaxImg() {    
    var speed = img.data("speed"); /
    / 獲取每張圖片設置了的偏移速度    var imgY = imgParent.offset().top; // 獲取圖片盒子所在的Y位置    var winY = $(this).scrollTop(); // 獲取當前滑動到的位置    var winH = $(this).height(); // 獲取瀏覽器窗口高度    var parentH = imgParent.innerHeight(); // 獲取圖片盒子的內高度    // 瀏覽器窗口底部的所在位置    var winBottom = winY + winH;     // 當前圖片是否進入瀏覽器窗口    if (winBottom > imgY && winY < imgY + parentH) {      // 運算圖片需要開始移動的位置      var imgBottom = (winBottom - imgY) * speed;      // 運算出圖片需要停止移動的位置      var imgTop = winH + parentH;      // 獲取從開始移動到結束移動的%（根據開始與結束像素 + 移動速度）      var imgPercent = (imgBottom / imgTop) * 100 + (50 - speed * 50);    }    img.css({      top: imgPercent + "%",      transform: "translate(-50%, -" + imgPercent + "%)",    });  }  $(document).on({    scroll: function () {      parallaxImg();    },    ready: function () {      parallaxImg();    },  });});</script>

知識總結

position: relative — 相對定位。
position: absolute — 絕對定位。
overflow: hidden — 如果需要，內容將被剪裁以適合填充框。不提供滾動條。

6. 裁剪圖像的動畫

在有CSS3之前裁剪圖片實現也是頗有難度的。現在我們有了兩個非常方便簡單的CSS3屬性可以實現裁剪，那就是object-fit和object-position, 這兩個屬性可以讓我們改變圖片的大小，但是不影響圖片的長寬比。

當然我們可以使用圖片處理工具或者使用JavaScript等插件來實現圖片裁剪功能。但是因為有了CSS3的屬性，我們不只可以裁剪，我們還可以用裁剪的屬性來做圖片的動態效果。

為了讓我們的例子更加簡單，我們這里使用了<input type="checkbox">復選框元素，這樣我們就可以使用:checked的偽類來觸發啟動效果。所以在例子里面我們完全不需要JavaScript的協助。

實現原理：

一、首先給予圖片一個寬高height: 1080px，width: 1920px。
二、然后用CSS選擇器，鎖定當input被選中后img標簽的樣式變化。當被選中時，給圖片設定一個新的寬高，這里我們給寬高各自500像素：width: 500px，height: 500px。
三、然后我們加上了過渡效果和時間讓圖片改變寬高時有動畫過渡效果：transition: width 2s, height 4s;。
四、最后加上object-fit: cover和object-position: left-top這兩個屬性來保持圖片的寬高比例，這樣就大功告成了！

我們來看看完成的代碼：

勾選裁剪圖片 
  <input type="checkbox" />
    <br />
    <img  src="https://img-blog.csdnimg.cn/2020032122230564.png"  alt="Random"/>

input {  
  transform: scale(1.5); 
  /* 只是用來放大復選框大小 */  
  margin: 10px 5px;  
  color: #fff;
}
img {  
  width: 1920px;  
  height: 1080px;  
  transition: 0s;
}
/* css選擇器鎖定復選框被選中時的狀態 */
input:checked + br + img {  
  width: 500px;  
  height: 500px;  
  object-fit: cover;  
  object-position: left-top;  
  transition: width 2s, 
  height 4s;
}

知識總結

object-fit — CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。

object-position — 用來切換被替換元素的內容對象在元素框內的對齊方式。

transition — 過渡可以為一個元素在不同狀態之間切換的時候定義不同的過渡效果。

7. 混合模式（Blend）

如果有使用過Photoshop的同學對blend混合模式應該是非常熟悉了，我們都知道混合模式是非常強大，也是p圖時非常常用的一個功能。但是你們有沒有想象過可以在瀏覽器的CSS中直接使用呢？對我們不需要設計師給我們做圖，我們前端也可以實現混合模式了。

在CSS中我們不只可以對background背景加入混合模式，我們可以對任何一個元素的自帶背景加入混合模式，讓你可以做出很多之前沒有想過的效果和排版。

往一個元素加入混合模式，我們只需要使用到一個CSS屬性mix-blend-mode即可。

簡單實現原理：

首先我們只需要加一個h1標題標簽

<h1>混合模式：顏色減淡</h1>

然后我們給h1標簽加入mix-blend-mode中的顏色減弱模式color-dodge，但是要注意的是我們需要給body和html加入背景顏色background: white，要不你會發現這個效果會無效。因為h1我們沒有給顏色，會自動往上級繼承，并且混合模式是針對背景顏色的過濾，所以body和html需要有背景顏色才行。

h1 {   
  mix-blend-mode: color-dodge;   
  font-family: yahei;   
  font-size: 5rem;   
  text-align: center;   
  margin: 0;    
  padding: 20vh 200px;   
  color: #D1956C; 
} 
html, body {   
  margin: 0;   
  background-color: white; 
} 
body {   
  background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);   
  background-repeat: no-repeat;   
  background-size: cover;   
  min-height: 100vh;   
  overflow: hidden; 
}

換換背景圖和h1標簽的字體顏色就可以弄出各種不同的特效了。

知識總結

mix-blend-mode — CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。

8. 瀑布流布局

CSS Grid和Flexbox讓我們可以更簡便，更容易和更快的實現各式各樣的響應布局，并且讓我們快捷方便的在布局中實現橫向劇中和豎向劇中。但是回想一下以前是頗為困難的。

雖然這些新出的布局方式可以讓我們解決很多以前的布局難題，但是像瀑布流布局這種，就無法用它們簡單來實現了。因為瀑布流一般來說都是寬度一致，但是高度是根據圖片自適應的。并且圖片的位置也是根據在上方圖片的位置而定的。

其實最好實現瀑布流布局的辦法就是用CSS的列屬性套件，這套屬性大多數都是用于排版雜志中的文本列。但是用于布局瀑布流也是特別實用哦。因為以前需要實現瀑布流，就必須有JavaScript的輔助來計算圖片高度然后決定每張圖片的定位和位置，所以現在有了列屬性就可以使用純CSS實現了。

實現原理：

實現這個布局，首選我們需要把所有的內容先包裹在一個div元素里面，然后給這個元素column-width和column-gap屬性。

然后，為了防止任何元素被分割到兩個列之間，將column-break-inside: avoid添加到各個元素中。

神奇的效果就完美實現了，零JavaScript。

我們來看看代碼：

<div class="columns">  
  <figure>    
  	<img src="https://source.unsplash.com/random?city" alt="" />  
    </figure>  
	<figure>    
    <img src="https://source.unsplash.com/random?night" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?developer" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?building" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?water" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?coding" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?stars" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?forest" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?girls" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?working" alt="" />  
  </figure>
</div>

.columns {  
  column-width: 320px;  
  column-gap: 15px;  
  width: 90%;  
  max-width: 1100px;  
  margin: 50px auto;
}
.columns figure {  
  display: inline-block;  
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);  
  column-break-inside: avoid;  
  border-radius: 8px;
}
.columns figure img {  
  width: 100%;  
  height: auto;  
  margin-bottom: 15px;  
  border-radius: 8px;
}

知識總結

column-width — CSS屬性建議一個最佳列寬。列寬是在添加另一列之前列將成為最大寬度。

column-width — 該 CSS 屬性用來設置元素列之間的間隔 (gutter) 大小。

column-break-inside — 設置或檢索對象內部是否斷。

總結

我希望這8個前端小技巧和特效對大家有幫助，或多或少有吸收一點新的前端知識。這篇文章提到的內容，其實很多都是值得深挖和學習的。有一些例子我做的比較簡單，但是其實是有無限的可能性。喜歡前端的童鞋們，讓我們繼續在前端領域中一起深挖，讓我們的熱愛無限的燃燒起來吧！

在最后我想給大家講一下我對前端的熱愛和態度。

回想前端這幾年，發展真的是突飛猛進，從前端排版，HTML5+CSS3做H5頁面，到前端組件化，各種UI框架滿天飛。

一開始我隨著熱潮用起了UI框架，起初覺得特別方便，來一個新的項目就直接上一個UI框架，研發速度也非常快。但是久而久之就覺得前端開發變成了處理數據，對接接口，實現交互。

某天在閱覽國外的一些前端設計和框架的時候，我突然發現國內多數的前端開發者都不再怎么使用CSS3做出一些很好玩的布局和特效了。現在市面上的系統和頁面都是千篇一律，普遍都是用一些知名的UI框架搭建系統和APP，基本自己動手去排版已經少之又少。前端已不再是以前的前端，缺少了靈魂。

但是我們回想一下，我們剛剛開始學習前端的時候，讓我們最有成就感，覺得前端特別有意思的那種感覺。就是那種讓我們覺得神乎奇跡，不可思議的布局，特效和交互。那種感覺自己成功實現了很優美，很炫酷的頁面和特效的感覺，讓我們越做越來勁，越做越是興奮。

但是在某些公司，研發部都是要求快速開發，UI設計部門也是受到時間的控制和限制，所以逐步走進了UI框架的限制之中。都是圍繞這一些UI框架來設計和開發系統和應用。

作為一名熱愛前端的開發者，我還是堅持在絕大多數的項目中，自己排版和實現頁面交互特效。然后使用UI框架作為輔助，主要是用來減輕一些小組件和常用組建的快速實現。（可以說我是比較追求完美和外貌協會的程序員）

————————————————

版權聲明：本文為CSDN博主「三鉆」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/TriDiamond6/article/details/105222289

在線咨詢

上一篇：網頁文本禁止復制粘貼？一分鐘學會六個套路，輕松突破限制
下一篇：HTML5從入門到精通：第二章 HTML詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

&amp;quot;探秘CSS3：打造視覺盛宴-深度解析漸變、陰影與遮罩技

秘CSS3：打造視覺盛宴——深度解析漸變、陰影與遮罩技術

一、魅力漸變：色彩的藝術流動

二、立體陰影：賦予元素生命與空間感

三、神奇遮罩：掌控元素可見度與透明度

四、實戰案例：融合三大技術，打造視覺盛宴

言

使用 JSPDF 和 html2canvas 創建簡單的 PDF文件

創建一個 JSPDF 實例

引入 html2canvas

將html2canvas轉化的圖片放到pdf中

JSPDF 和 html2canvas結合起來用

多頁：比例縮放+循環移位

分頁截斷的挑戰

如何獲得h1和h2

在線demo演示和源代碼

5. 圖片視差效果

使用CSS + JavaScript

7. 混合模式（Blend）

8. 瀑布流布局

總結

您的項目需求

"探秘CSS3：打造視覺盛宴-深度解析漸變、陰影與遮罩技