使用径向渐变的动态印章效果

Question

这个例子（不是我的代码）：

展示如何使用径向渐变应用漂亮的图章边缘效果。

HTML:

body {
  padding: 100px;
  background: #aaa;
}
.stamp {
  width: 184px;
  height: 184px;
  padding: 8px;
  background: white;
  background: radial-gradient(transparent 0px, transparent 4px, white 4px, white);
  background-size: 20px 20px;
  background-position: 10px 10px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

<div class="stamp">
  <img src="http://qualityLessons.net/Assets/images/css3html5.png" alt="css 3" width="184px" height="184px" />
</div>

但是当对任意大小的图片（用户生成的图片）使用此方法时。边缘显示在错误的位置。而且整个效果很难看。

我的问题是：如何使用适用于任何图像尺寸的径向渐变实现相同的效果？

Answer 1

为了达到这个预期的效果，我被迫将您的图片作为您 .stamp class 的背景。

从这里开始，我可以使用伪元素来应用径向背景，设置它的高度和宽度以显示在您要寻找的形状之外。

html {
  text-align: center;
  background: #aaa;
  margin-top: 20%;
}
.stamp {
  display: inline-block;
  position: relative;
  background: url(http://qualityLessons.net/Assets/images/css3html5.png);
  background-size: 100% 100%;
  height: 300px;
  width: 300px;
  margin: 10px;
}
.stamp:before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  height: calc(100% + 20px);
  width: calc(100% + 20px);
  background: radial-gradient(transparent 0px, transparent 4px, white 4px, white);
  background-size: 20px 20px;
  background-position: 10px 10px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  z-index: -2;
}
.image2 {
  background: url(http://lorempixel.com/300/300);
  height: 200px;
  width: 280px;
}

<div class="stamp"></div>
<br />
<div class="stamp image2"></div>

尽管对于这样的任务这可能是可行的，但您应该考虑使用 border-image 属性，其中

div {
  border-width: 5px;
  border-style: solid;
  border-image: url("http://iconizer.net/files/Vista_Style_Base_Software/orig/Circle_Blue.png") repeat;
}

<div>Hello!</div>

more info on border-image

Answer 2

在不更改标记的情况下进行微小的更改并完成工作。

body {
  padding: 100px;
  background: #aaa;
}
.stamp {
  /*added this*/
  font-size: 0;
  /*added this*/
  display: inline-block;
  /*changed this*/
  padding: 10px;
  /*changed this*/
  background: radial-gradient(transparent 0px, transparent 5px, #fff 1px, #fff);
  /*changed this*/
  background-size: 20px 20px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  /*changed this*/
  background-position: 10px 10px;
}
/*just so you know it's for demo*/

.stamp {
  margin-bottom: 20px;
}

<div class="stamp">
  <img src="http://qualityLessons.net/Assets/images/css3html5.png" alt="css 3" width=500 height=300/>
</div>

<div class="stamp">
  <img src="http://qualityLessons.net/Assets/images/css3html5.png" alt="css 3" width=200 height=300/>
</div>

<div class="stamp">
  <img src="http://qualityLessons.net/Assets/images/css3html5.png" alt="css 3" width=180 height=180/>
</div>

注意 - 这是假设您只有图像在里面。如果 .stamp 中有一段文字，则需要专门设置 font-size 以覆盖 .stamp 上的 font-size : 0。

使用径向渐变的动态印章效果

Dynamic stamp effect using radial-gradient

css

radial-gradients