Question

我需要一些技巧来使用像这样的CSS来插入边框空白区域。

any border blank space trick ? for CSS

我使用像这样的CSS box-shadow

 box-shadow:
        -1px 0px 0px 0px #000,
        0px -1px 0px 0px #000,
        0px 1px 0px 0px #000,
        1px 1px 0px 0px #000

我不知道如何使边框/阴影看起来像图片。

我只会使用一个html元素.. <div></div>

任何技巧？

游乐场： http://jsfiddle.net/ES66k/

Answer 1

您可以使用类<div>，.top-left，.top-right和.bottom-left创建4个.bottom-right。使它们绝对，容器相对。调整它们的大小，使它们成为容器的颜色bg-color，并将它们带到top, right, bottom and left属性的角落。它们的值必须减去 边框宽度。以下是具有3px边框的元素的示例：

HTML：

<div class="box">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</div>

CSS：

.box{
    width: 300px;
    height: 300px;
    border: 3px solid #666;
    position:relative; 
}

.corner{
    width: 10px;
    height: 10px;
    background-color: #fff; 
    position: absolute;
}

.top-left{
    top: -3px;
    left: -3px;
}
.top-right {
    top: -3px;
    right: -3px;
}
.bottom-left{
    bottom: -3px;
    left: -3px;
}
.bottom-right{
    bottom: -3px;
    right: -3px;
}

Answer 2

只有一个div：http://jsfiddle.net/ES66k/1/（在Fx18和chrome上测试）

div {
  width:300px;
  height:170px;
  margin:100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  position: relative;
}

div:after, div:before {
   content: "";
   position: absolute;
   top: -1px;
   width: 20px;
   height: 172px;
   border-top: 40px white solid;
   border-bottom: 40px white solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }

无论如何，它有点hacky，因为它依赖于固定的高度和纯色作为背景（白色），但可能对您的目的有用。

Answer 3

尝试使用CSS3属性border-image：

这是一个你可以看看的演示并亲自试用：CSS3 border-image

Answer 4

div {
  width:300px;
  height:170px;
  margin:100px;
  position:relative;

 background:#ccc;

}

div:before, div:after {
 content:"";
 position:absolute;
 top:0;
 left:0;
}
div:before {
    width:280px; /*****-20px*****/
    height:168px; /*****-2px*****/

    margin-left:10px;
    border-top:1px solid #f00;
    border-bottom:1px solid #f00;
}
div:after {
    width:298px; /*****-2px*****/
    height:150px; /*****-20px*****/

    margin-top:10px;
    border-left:1px solid #f00;
    border-right:1px solid #f00;
}

演示： http://jsfiddle.net/ES66k/4/

现在完成，不需要设置背景颜色：D

但是还是感谢@Fabrizio Calderan：D

任何边境空白把戏？用于CSS

4 个答案: