带有内框/边框描边的CSS外部div元素

时间:2014-08-01 18:08:04

标签: html css css3 box

我试图尝试以下方法。我有一个div包含一个边框大的框。这是我一直在玩的代码。

.insta{
  background:#000;
  width:820px;
  height:300px;
  margin-left: auto;
  margin-right: auto;
}
.inner-line{
border:10px solid #fff;
width:88%;
height:300px;
position:relative;
right:20;
left:20;
top:20;
bottom:20;
}

<div class="insta"><div class="inner-line"></div></div>

我得到了这个结果,

enter image description here

我试图将此作为最终结果,

enter image description here

我知道CSS提供的盒子方法,但不知道我是否可以使用它来实现这一点。任何想法或想法?

3 个答案:

答案 0 :(得分:1)

您可以使用不使用展开或模糊和边框的框阴影组合:

CSS

    border: 10px solid white;
    -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);

JSfiddle

答案 1 :(得分:0)

也许边界类型“脊”就够了......

http://jsfiddle.net/67U9z/1/

.inner-line{
    border:3px ridge white;
    ...

答案 2 :(得分:0)

我知道这个问题很老,但你可以使用轮廓偏移量: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset

只需将偏移更改为负数,以便将其放入容器内:

outline-offset: -15px;