Question

我想知道是否有可能追踪1px方形轮廓，插入div内的特定距离。目前，css和HTML看起来像这样

.object {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    padding: 5px;
}

<div class="object">
    Hello World!
</div>

导致：

http://i.imgur.com/qdB0yb6.png

预期结果如下：

http://i.imgur.com/vnfFhmY.png

Answer 1

方法＃01：

您可以绘制outline并使用outline-offset属性。

注意：IE不支持 outline-offset。

＆＃13;

.object {
  outline: solid #fff 1px;
  outline-offset: -5px;
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  margin: 5px;
  padding: 10px;
}

＆＃13;

<div class="object">
    Hello World!
</div>

＆＃13;

方法＃02：

您可以使用:before或:after伪元素绘制轮廓或从所有边延伸的background。

＆＃13;

.object {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
  color: white;
  padding: 5px;
  margin: 10px;
}

.object:before {
  background-color: red;
  position: absolute;
  content: '';
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  z-index: -1;
}

＆＃13;

<div class="object">
    Hello World!
</div>

＆＃13;

方法＃03：

您可以使用css3 linear-gradient()绘制多个背景图像。以下是必要的css：

div {
  background-image: linear-gradient(to right, white, white),
                    linear-gradient(to bottom, white, white),
                    linear-gradient(to right, white, white),
                    linear-gradient(to bottom, white, white),
                    linear-gradient(to right, red, red);

  background-repeat: no-repeat;
  background-size: calc(100% - 10px) 1px, 1px calc(100% - 10px), calc(100% - 10px) 1px, 1px calc(100% - 10px), 100% 100%;
  background-position:  5px 5px, top 5px right 5px, bottom 5px right 5px, 5px 5px, 0 0;
}

＆＃13;

.object {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to right, white, white),
                      linear-gradient(to bottom, white, white),
                      linear-gradient(to right, white, white),
                      linear-gradient(to bottom, white, white),
                      linear-gradient(to right, red, red);
    
    background-repeat: no-repeat;
    background-size: calc(100% - 10px) 1px, 1px calc(100% - 10px), calc(100% - 10px) 1px, 1px calc(100% - 10px), 100% 100%;
    background-position:  5px 5px, top 5px right 5px, bottom 5px right 5px, 5px 5px, 0 0;
    
    color: white;
    padding: 10px;
}

＆＃13;

<div class="object">
    Hello World!
</div>

＆＃13;

Answer 2

您可以使用box-shadow属性：

＆＃13;

.object {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 1px solid white;
    color: white;
    margin: 5px;
    padding: 5px;
    box-shadow: 0 0 0 5px red;
}

＆＃13;

<div class="object">
    Hello World!
</div>

＆＃13;

Answer 3

这样的事情应该这样做

.object {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    padding: 5px;
    position: relative;
}
.object::after {
    content:"";
    display: block;
    position: absolute;
    width: 97.5px;
    height: 97.5px;
    top: 5px;
    left: 5px;
    border: 1px solid #fff;
}

Answer 4

您可以使用border属性并设置margin（因为margin位于边框之外）。如果您不希望更改div的总大小，请减少padding以补偿保证金。

Answer 5

也可以使用两个框阴影：

.object {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    padding: 5px;
    box-shadow: inset 0 0 0 4px red, inset 0 0 0 5px #fff;
}

<div class="object">
    Hello World!
</div>

Answer 6

您可以通过在div中添加span或编写jquery脚本来自动添加它来解决此问题。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    .object, .object-js {
        width: 100px;
        height: 100px;
        background-color: red;
        color: white;
        padding: 5px;   
        position: relative;
    }
    .object span, .object-js span{
        border: 1px solid #ffffff;
        padding: 2px;
        height: calc(100% - 5px);
        display: block;
        overflow-y: auto;
    }
</style>

</head>
<body>
<div class="object">
   <span>Hello World.</span> 
</div>
 <br>
<div class="object-js">
   Hello World.
</div>
</body>
  <script>
    $( document ).ready(function() {
      var html = $(".object-js").html();
      $(".object-js").html("<span>"+html+"</span>");
    });
    </script>
</html>

使用CSS绘制一条方形线，插入div

6 个答案: