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

Question

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

http://codepen.io/mohitmanuja/pen/odxic

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

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课程的背景。

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

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以覆盖font-size : 0上的.stamp。