CSS嵌套边框 [英] CSS Inset Borders

问题描述

我有一个关于CSS边框的快速问题。

我需要创建一个纯色镶边边框。这是我使用的CSS的位：

border：10px inset rgba（51,153,0,0.65）;

不幸的是，这会创建一个3D脊状边框（忽略正方形和黑色描述框）：

a href =http://dl.dropbox.com/u/12147973/border-current.jpg> http://dl.dropbox.com/u/12147973/border-current.jpg p>

这是目标：

http://dl.dropbox.com/u/12147973/border-boal.jpg

任何想法？

解决方案

您可以使用 box-shadow >

  #something {
 background：transparent url（http://davidrhysthomas.co.uk/linked/astrid_avatar.png）50 ％50％无重复; 
 min-width：300px; 
 min-height：300px; 
 box-shadow：inset 0 0 10px＃0f0; 
} 
  

  #something {background：透明url（http://davidrhysthomas.co.uk/linked/astrid_avatar.png）50％50％不重复; min-width：300px; min-height：300px; box-shadow：inset 0 0 10px＃0f0;}  

  < div id =something>< / div>  

这有一个优点，它将覆盖 div 的背景图像，但它当然是模糊的（正如你期望从 box-shadow 属性）。要建立阴影的 density ，你可以添加额外的阴影：

  #something {
 background：transparent url（http://davidrhysthomas.co.uk/linked/astrid_avatar.png）50％50％no-repeat; 
 min-width：300px; 
 min-height：300px; 
 box-shadow：inset 0 0 20px＃0f0，inset 0 0 20px＃0f0，inset 0 0 20px＃0f0; 
} 
  

  #something {background：透明url（http://davidrhysthomas.co.uk/linked/astrid_avatar.png）50％50％不重复; min-width：300px; min-height：300px; box-shadow：inset 0 0 20px＃0f0，inset 0 0 20px＃0f0，inset 0 0 20px＃0f0;}  

 < div id =something>< / div>   
 
 
 
 
 
 
 已编辑，因为我意识到我是一个白痴，最简单的解决方案 ，它使用一个否则为空的子元素在背景上应用边框：
 
 
 
 
 
 
  #something {background：transparent url（http://davidrhysthomas.co.uk/linked/astrid_avatar.png）50％50％no-repeat; min-width：300px; min-height：300px; padding：0; position：relative;}＃something div {position：absolute; top：0; left：0; right：0; bottom：0; border：10px solid rgba（0，255，0，0.6）;}  
 
 < div id =something> < div>< / div>< / div>  
 
 
 
 
 
 
 
 
 
 已编辑： @ CoryDanielson的评论，下面：
 
 
 jsfiddle.net/dPcDu/2您可以为<$ 
 
 
 
 div class =snippetdata-lang =jsdata-hide =false> 
 
  #something {background：transparent url（http://davidrhysthomas.co.uk/linked/astrid_avatar.png）50％50％no-repeat; min-width：300px; min-height：300px; box-shadow：inset 0 0 0 10px rgba（0，255，0，0.5）;}  
 
 < div id =something>< / div>  
 
 
I'm have a quick question on CSS borders.

I need to create a solid color inset border. This is the bit of CSS I'm using:

border: 10px inset rgba(51,153,0,0.65);

Unfortunately that creates a 3D ridged border (ignore the squares and dark description box): 

http://dl.dropbox.com/u/12147973/border-current.jpg

This is the goal:

http://dl.dropbox.com/u/12147973/border-boal.jpg

Any ideas?
解决方案
You could use box-shadow, possibly:
#something {
    background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 10px #0f0;
}


#something {
  background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 10px #0f0;
}

<div id="something"></div>





This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
    background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}


#something {
  background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

<div id="something"></div>







Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:



#something {
  background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  padding: 0;
  position: relative;
}
#something div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(0, 255, 0, 0.6);
}

<div id="something">
  <div></div>
</div>







Edited after @CoryDanielson's comment, below:

  
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.


#something {
  background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}

<div id="something"></div>





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