CSS边框：距离对象边缘？ [英] CSS Borders: Distance from Object Edge?

问题描述

快速问题。我写了一些代码，很好奇，如果有一个方法来添加一个边框上的对象中的5px，因为不是在div的实际边缘。我检出了WC3，没有看到任何规格，但我可能已经错过了它。

在我的情况下，我会在div中使用一个虚线边框5px，创建一个像div被缝制到网站的其余部分的效果。我可以很容易地用background-image做它，但为什么添加KB时，一行或两个css可以做到。

我会假设它会像border

解决方案

我从来没有遇到类似这样的任何财产，所以我不得不说，不，

感觉不好，所以我真的可以建议是包装 div 你想在另一个缝合另一个 div ，并使用相同的 background-color 为父项设置样式，以模拟您之后的外观。下面是一些可能的css：

  .wrap {
 border-width：0; 
 background-color：#ffa; 
 width：50％; 
 padding：0.5em; 
} 
 
 .wrap #panel {
 background-color：inherit; 
 height：6em; 
 border：5px dotted＃f90; 
 text-align：center; 
} 
  

和一些html：

 < div class =wrap> 
< div id =panel> 
< p>此面板应该看起来很有缝。< / p> 
< / div> 
< / div> 
  

最后， A JS Fiddle演示

好吧，刚刚重新发现了这个答案（感谢上议员！），我现在可以提供一个实际的CSS-only无外元素解决方案，使用 box-shadow ：

  #panel {
 background-color：#ffa; 
 height：6em; 
 border：5px dotted＃f90; 
 text-align：center; 
 width：50％; 
 margin：30px auto 0 auto; 
 box-shadow：0 0 0 15px #ffa; 
} 
  

第四个参数是键，它定义了阴影的'扩展'第三个参数定义了'fuzziness'/'diffusion'，在这种情况下是 0 ），使用相同的 background-color 作为元素本身给出的幻觉， border 是在元素内，而它实际上是元素的延伸从元素的阴影。

Quick question. I was writing out some code and was curious if there is a way to add a border on a div that is 5px within the object - as in not on the actual edge of the div. I checked out WC3 and didn't see any specs - but I may have missed it.

In my case I'd be using a dashed border 5px inside the div, to create an effect like the div had been sewn to the rest of the site. I can do it fairly easily with background-image but why add KB when a line or two of css could do it.

I would assume it would be something like "border-position" or "border-distance".

Thanks in advance.

解决方案

I've never come across any property that resembles this, so I'd have to say, simply, 'no.'

But then I'd feel bad for that, so all I could really suggest is wrapping the div you wish to 'sew on' within another div and styling the parent with the same background-color to emulate the look you're after. Here's some css for a possible take:

.wrap {
    border-width: 0;
    background-color: #ffa;
    width: 50%;
    padding: 0.5em;
}

.wrap #panel {
    background-color: inherit;
    height: 6em;
    border: 5px dashed #f90;
    text-align: center;
}

And some html:

<div class="wrap">
    <div id="panel">
        <p>This panel should look kinda sewn-on.</p>
    </div>
</div>

And, finally, A JS Fiddle demo

Okay, having just rediscovered this answer (thanks to the up-voter!), I can, now, provide an actual CSS-only no-extraneous-elements solution, using box-shadow:

#panel {
    background-color: #ffa;
    height: 6em;
    border: 5px dashed #f90;
    text-align: center;
    width: 50%;
    margin: 30px auto 0 auto;
    box-shadow: 0 0 0 15px #ffa;
}​

JS Fiddle demo.

The fourth parameter is the key, it defines the, uh, 'spread' of the shadow (the third parameter defines the 'fuzziness'/'diffusion' which in this case is 0), using the same background-color as the element itself gives the illusion that the border is within the element, while it's actually a shadow of the element extending out from the element.

这篇关于CSS边框：距离对象边缘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！