花式图像装饰：单元魔术

>本文仅使用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中文网其他相关文章！