花式圖像裝飾：單元魔術

>本文僅使用img>標籤和CSS探索創意圖像裝飾技術，這是一項艱鉅而有意義的努力。 忘記額外的標記，divs或偽元素；我們將通過一個元素實現驚人的結果。 這是展示CSS力量的系列中的第一個。

系列：

單元素魔術 -
• >本文
>遮罩和高級懸停效果
概述和復雜動畫

>樣式的可能性：> 沒有其他元素，我們的樣式選項僅限於

>，

，和。 有趣的是，即使border隱藏在圖像後面，我們也可以通過使用box-shadow和/或outline在圖像周圍創建空間來利用它，然後在該空間內繪製背景。 這為使用梯度打開了令人印象深刻的效果的大門。 background background>padding示例1：漸變幀border

>

此示例使用圓錐梯度，填充和輪廓來創建視覺上吸引人的框架。 透明的邊框和填充與梯度的>和屬性一起工作，以達到所需的框架效果。 負面

會產生乾淨的平方形狀。

> background-origin background-clip>outline-offset示例2：僅角幀

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

>

此示例使用四個圓錐梯度，一個用於每個角落。 在懸停的情況下，這些梯度擴展以創建一個完整的框架。 梯度利用顏色之間的硬停止來創建鋒利的邊緣，而CSS變量可增強代碼可讀性。

高級技術和動畫：

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}
img:hover {
  background-size: 51% 51%;
}

>

>本文使用梯度操縱，和復雜的懸停動畫探討了更複雜的示例。 這些示例證明了梯度在創建各種形狀和效果方面的多功能性。 CSS變量和內部變量的使用（具有下劃線的前綴）改善了代碼組織和可維護性。

結論：

clip-path>本文展示了CSS和梯度使用單個標籤創建視覺上令人印象深刻的圖像裝飾的功能。 該系列以更高級的技術，探索口罩，懸停效果和復雜的動畫繼續進行。 對鏈接文章的進一步探索將對基本CSS原則有更深入的了解。

以上是花式圖像裝飾：單元魔術的詳細內容。更多資訊請關注PHP中文網其他相關文章！