使用图像作为边框CSS3

Question

我需要使用图像作为边框。 我有图像，但是无法成功完成任务。 我需要在整个身体上使用该边框。

看一下我的工作：

http://jsfiddle.net/A3MBH/

div{
    width: 200px;
    height: 200px;
    border: 5px dotted #000;
    border-radius: 20px;
}

.image{
    border-width: 25px;
    -moz-border-image: url("http://s17.postimg.org/aftdxgoxn/border.png") 50 40 repeat repeat;
    -webkit-border-image: url("http://s17.postimg.org/aftdxgoxn/border.png") 50 40 repeat repeat;
    border-image: url("http://s17.postimg.org/aftdxgoxn/border.png") 50 40 repeat repeat;    
}

我需要看起来像上面，但使用图像。 有人可以帮忙吗？

我需要什么？ 我基本上需要带有阴影效果的圆形边框，我尝试在Google中搜索但找不到任何相关文章。

是否可以添加带有一定半径的虚线边框并带有阴影？ CSS3中有可能吗？ 如果没有，图像会起作用吗？

谢谢你，我的英语不好意思。

Answer 1

如果边框图像+蒙版不适合您，请尝试在2个元素上喷涂虚线边框： http : //codepen.io/gc-nomade/pen/czKEp

html {
  padding:2em 5em;
}
body , div{
  border:dotted 15px rgba(0,0,0,0.25);
  height:100%;
  border-radius:5em;  
  margin:0;
}
div {
  margin:-12px;
  border-color:gray;
  min-height:10em;
  padding:2em;
}

<div>dotted radius</div>

Border-image和多个背景看起来更好:)

Answer 2

更新的小提琴 ： http : //jsfiddle.net/A3MBH/6/或者确切地说是： http : //jsfiddle.net/A3MBH/7/

HTML：

<div class="image">
     <div class="contentDiv">
        Content goes here.
    </div>

</div>

CSS：

.image{
   padding: 30px 15px 12px 15px;
   width: 300px;
   height: 310px;    
   background: url("http://s17.postimg.org/aftdxgoxn/border.png") 0 0 repeat transparent ;
}
.contentDiv{
   background:#ffffff;
   width: 280px;
   height: 290px;
}

Answer 3

看看

http://jsfiddle.net/fauverism/A3MBH/5/

HTML

 <div class="container"> <span class="circle-1"></span> <span class="circle-2"></span> <span class="circle-3"></span> <span class="circle-4"></span> </div> 

CSS

 div{ width: 200px; height: 200px; border-radius: 20px; } .circle-1 { background: grey; border-radius: 10px; display: block; height: 10px; box-shadow: 0px 10px 2px rgba(150, 150, 150, 1); width: 10px; position: absolute; top: 0; left: 0; } .circle-2 { background: grey; border-radius: 10px; display: block; height: 10px; box-shadow: 0px 10px 2px rgba(150, 150, 150, 1); width: 10px; position: absolute; top: 0; right: 0; } .circle-3 { background: grey; border-radius: 10px; display: block; height: 10px; box-shadow: 0px 10px 2px rgba(150, 150, 150, 1); width: 10px; position: absolute; bottom: 0; left: 0; } .circle-4 { background: grey; border-radius: 10px; display: block; height: 10px; box-shadow: 0px 10px 2px rgba(150, 150, 150, 1); width: 10px; position: absolute; bottom: 0; right: 0; } 

您可以创建多个span.circle并将span元素放置在容器div中。

不要使用可通过CSS3轻松创建的图像。 您会遇到扩展和浏览器/设备问题，并且必须做比您更多的工作。

Answer 4

如果要使用边框图像，则需要使用适当的图像来绘制边框。 然后应用这样的样式：

.image {
  height:200px;
  width:200px;
  margin:auto;
  border-style: solid; 
  border-width: 32px 34px 31px 30px; 
  -moz-border-image: url(http://i.stack.imgur.com/RDDO2.png) 32 34 31 30 round; 
  -webkit-border-image: url(http://i.stack.imgur.com/RDDO2.png) 32 34 31 30 round; 
  -o-border-image: url(http://i.stack.imgur.com/RDDO2.png) 32 34 31 30 round; 
  border-image: url(http://i.stack.imgur.com/RDDO2.png) 32 34 31 30 round;
}

http://jsfiddle.net/A3MBH/8/

---

使用伪元素作为掩码，可以获得以下结果：

http://codepen.io/gc-nomade/pen/dbHFx/

根据您的需求进行调整：)

---

为了在流体布局上使用，请使用2个伪元素，分别在绝对位置将其设置为顶部和底部。 遮罩边框并绘制圆形边框根据您的半径值将其裁剪