使用图像作为边框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;    
}

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

我需要什么？我基本上需要一个带阴影效果的圆形边框，我尝试在谷歌搜索但无法找到任何相关文章。

这是否可以添加一个半径为虚线的边框并有阴影？ CSS3有可能吗？ 如果没有那么图像会起作用吗？

谢谢，对不起我的英语。

Answer 1

如果border-image +一个面具不适合你，请尝试使用喷涂在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

如果要使用border-image，则需要使用正确的图像来绘制边框。 而不是应用这样的风格：

.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个伪元素，分别设置在绝对位置的顶部和底部。根据您的半径值掩饰边框并绘制圆形边框