仅在一侧插入Box Shadow？ [英] Inset Box Shadow only on one side?

问题描述

是否有可能以某种方式在div的一边只有插入框阴影？请注意，我在这里讨论的是一个插入框阴影，而不是普通的外框阴影。 例如，在下面JSFiddle，你会看到插入的影子在不同程度上出现在所有的四面。

我怎样才能让它只显示在顶部？或至多只在顶部和底部？

JSFiddle： http://jsfiddle.net/ahmadka/KFrun/

HTML：

 < div class =myDiv> 
< div class =text> 
 Lorem ipsum .... 
< / div> 
< / div> 
  

CSS：

  .box 
 {
 -webkit-box-shadow：inset 0px 5px 10px 1px＃000000; 
 box-shadow：inset 0px 5px 10px 1px＃000000; 
} 
 
 .text 
 {
 padding：20px; 
 
  

解决方案

这就是你要找的对于。它包含你想要阴影的每一面的例子。

更多示例请参阅js小提琴：
http://jsfiddle.net/KFrun/171/

  .top-box 
 {
 box-shadow：inset 0 7px 9px -7px rgba（0,0,0,0.4）; 
} 
 .left-box 
 {
 box-shadow：inset 7px 0 9px -7px rgba（0,0,0,0.4）; 
} 
 .right-box 
 {
 box-shadow：inset -7px 0 9px -7px rgba（0,0,0,0.4）; 
} 
 .bottom-box 
 {
 box-shadow：inset 0 -7px 9px -7px rgba（0,0,0,0.4）; 
} 
  

Is it possible to somehow only have inset box-shadow on one side of a div ? Note that I'm talking about an inset box-shadow here, not the normal outer box-shadow.

For example, in the following JSFiddle, you'll see that the inset shadow appears on all 4 sides, in varying degrees.

How do I get it to ONLY show at the top ? Or at most ONLY at top and bottom ?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

HTML:

<div class="myDiv">
    <div class="text">
        Lorem ipsum ....
    </div>
</div>

CSS:

.box
{
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

.text
{
    padding:20px;   
}

解决方案

This is what you are looking for. It has examples for each side you want with a shadow.

See the js fiddle for more examples: http://jsfiddle.net/KFrun/171/

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

这篇关于仅在一侧插入Box Shadow？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！