如何在图像周围放置褪色和锯齿状边框

Question

我试图在图像周围放置边框，使其看起来像下面的图像。是否可以在CSS中使用？

Answer 1

将此class css添加到您的样式表

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

将width设置为图片的width。并将此html用于图片

<div class="border_gradient">
        <img src="image.png" />
</div>

虽然它可能没有给出相同的精确边框，但它会在边框上显示一些渐变。

来源：CSS3 Borders

Answer 2

CSS不可能。将PNG图像与截止图像一起用于实际图像并将其置于实际图像上方

.border {
  background: url("http://www.clker.com/cliparts/b/W/3/l/3/I/gold-cool-border-hi.png") no-repeat center center;
  width: 504px;
  height: 593px;
  position: absolute;
  left: 0;
  top: 0;
}
.wrapper {
  width: 504px;
  height: 593px;
  overflow: hidden;
  position: relative;
}

<div class="wrapper">
  <img src="http://lorempixel.com/g/510/600/" />
  <div class="border">
  </div>

</div>

Answer 3

不是用css。

但是你可以用锯齿状边框制作一些图像并在图像周围放置html元素。将边框图像指定为html元素的背景，并将它们放置在position：absolute到正确的位置。

注意z-index。

像这样。

<div class="div_container"> 
  <img src="some_image.png" />
  <span class="corner--topleft"></span>
  <span class="corner--topright"></span>
  <span class="corner--bottomrright"></span>
  <span class="corner--bottomleft"></span>
  <span class="frame--left"></span>
  <span class="frame--rright"></span>
  <span class="frame--top"></span>
  <span class="frame--bottom"></span>
</div>

Answer 4

您可以使用border-image属性在边框中使用图像： http://www.w3schools.com/cssref/css3_pr_border-image.asp