是否可以从包含框中制作2px的边框？

Question

这就是我的意思：

我想从包含框中放入2px的边框。这只能使用CSS吗？

Answer 1

单向，使用pseudo elements：

http://jsfiddle.net/1x2chmee/1/

.box {   
    width: 200px;
    height: 100px;
    background-color: orange;
    position: relative;
    padding: 16px;
}

.box:after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
    border: 2px solid #fff;
}

这种方法有点冗长，但它得到了浏览器的良好支持和灵活性。

另一个包含更多选项的示例：http://jsfiddle.net/1x2chmee/2/

Answer 2

您还可以使用CSS outline属性：

.yourDiv {
   height:300px;
   width:500px;
   background-color: #E9967A;
   outline-style: solid;
   outline-offset: -10px;
   outline-width: 3px;
   outline-color: #fff;
}

在这里小提琴：http://jsfiddle.net/H7KdA/39/

---

有关此CSS属性的更多信息：http://www.w3schools.com/css/css_outline.asp

---

浏览器支持：http://caniuse.com/#feat=outline

编辑：IE9和IE10不支持outline-offset：

Answer 3

<div class="lol">   <span class="title">This is a title</span> </div>

.lol{
  width: 300px;
  height:200px;
  background: #ff8800;
  position: relative;
}

.lol:after{
  content:'';
  width: 280px;
  height:180px;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  border:3px solid #fff;
}

.title{
  display: block;
  text-align: center;
  color: #fff;
  font-family: verdana;
  font-size: 1.3em;
  padding-top: 20%;
}

See it here

Answer 4

您可以使用特定的CSS3盒子阴影规则。

-moz-box-shadow: inset #B3B3B3 0 -1px 0 0;
-webkit-box-shadow: inset #B3B3B3 0 -1px 0 0;
box-shadow: inset #B3B3B3 0 -1px 0 0;

原帖：How can I make inner border using CSS3?