强制框阴影在内容的顶部 [英] Force Box-Shadow on top of Content

查看:100
本文介绍了强制框阴影在内容的顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不明白为什么,但是我的内容下面有一个插入框阴影。



这里有一个例子:

  div {
box-shadow:inset 0 0 10px black;
height:300px;
color:red;
}


 < div> 
a
< / div>

http://jsfiddle.net/MAckM/



您会看到 a 在盒子阴影之上。



如何获得盒子阴影在 / code>?

解决方案

您需要在div中创建一个新元素,

 <$ c> 

$ c>< div>
< div>< / div>
a
< / div>

CSS:

  div {
height:300px;
color:red;
position:relative;
}

div div {
box-shadow:inset 0 0 10px black;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

这是一个 JSFiddle



编辑



或者,您可以使用伪元素:



HTML:

 < div> 
a
< / div>

CSS:

  div {
height:300px;
color:red;
position:relative;
}

div:before {
content:'';
display:block;
box-shadow:inset 0 0 10px black;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

JSFiddle


I don't understand why, but an inset box shadow is beneath my content.

Here's an example:

div {
   box-shadow:inset 0 0 10px black;
   height:300px;
   color:red;
}


​<div>
   a
</div>​

http://jsfiddle.net/MAckM/

You see the a is on top of the box shadow.

How can I get the box shadow to be on top of the a?

解决方案

You need to make a new element inside the div, with absolute positioning and height and width of 100%, then give that element the box shadow.

HTML:

<div>
    <div></div>
    a
</div>​

CSS:

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​

Here is a JSFiddle.

Edit:

Alternatively, you can use a pseudo element:

HTML:

<div>
    a
</div>​

CSS:

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​

JSFiddle.

这篇关于强制框阴影在内容的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆