2

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

任何边框空白技巧？ 对于 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/

4

4 回答 4

2

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

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;
}
于 2013-01-30T13:01:58.087 回答
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，因为它依赖于固定的高度和纯色作为背景（白色），但可能对您的目的有用。

于 2013-01-30T13:07:16.000 回答
1

尝试使用 CSS3 属性边框图像：

这是一个演示，您可以查看并自己尝试：CSS3 border-image

于 2013-01-30T13:08:02.873 回答
0 
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

于 2013-01-30T13:56:08.770 回答