我想知道css3中是否支持侧面特定的内部阴影。
我知道这在受支持的浏览器上效果很好。
div { box-shadow:inset 0px 1px 5px black; }
我只是想知道是否有一种方法可以实现以下目标:
div { box-shadow-top:inset 0px 1px 5px black; }
Answers:
box-shadow: inset 1px -4px 9px -6px;
为底部阴影。
box-shadow: inset 4px 1px 9px -6px;
右侧阴影:box-shadow: inset -4px 1px 9px -6px;
我认为您并不是真正需要的,box-shadow-top
因为如果将其设置offsetx
为0并设置offsety
为任何正值,则仅剩余阴影在顶部。
如果要在顶部有阴影,在底部有阴影,则只需使用两个div:
<div style="box-shadow:inset 0 1px 5px black;">
<div style="box-shadow:inset 0 -1px 5px black;">
some content
</div>
</div>
如果要消除侧面的阴影,请使用rgba
而不是hex
颜色并设置更大的值offsety
:
box-shadow:inset 0 5px 5px rgba(0,0,0,.5)
这样,您可以使阴影具有更大的不透明度,从而使侧面保持隐藏状态,并且偏移量越大,您得到的不透明度越少
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
background: #1C1C1C;
}
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: #fff;
-webkit-border-radius: 20px;
-khtml-border-radiust: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow:inset 0px 5px 5px rgba(0,0,0,.5);
}
div > div {
background:none;
box-shadow:inset 0px -5px 5px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div><div></div></div>
</body>
</html>
box-shadow-top
。编辑但这也是我通常这样做的方式=)
rgba
而不是hex
颜色,并设置更大offsety
:box-shadow:0 5px 5px rgba(0,0,0,.5)这样您可以使阴影更加不透明,从而使侧面保持隐藏偏移量
box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;
在上例中,使用:before
和after
元素并带有规则阴影的元素被切掉,overflow:hidden
例如本例:http : //dabblet.com/gist/2585782
/**
* Top and Bottom inset shadow
*/
#element{
background-color: #E3F2F7;
height: 55px;
position: relative; /* to position pseudo absolute*/
overflow: hidden; /* to cut of overflow shadow*/
margin-top: 200px;
}
#element:before , #element:after{
content: "\0020";
display: block;
position: absolute;
width: 100%;
height: 1px; /* when 0 no shadow is displayed*/
box-shadow: #696c5c 0 0 8px 0;
}
#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px} /* because of height: 1*/
<div id="element"></div>
在大多数情况下,您可以使用背景渐变进行变通:
SCSS(带指南针)示例:
@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
这很可爱:)
这是一个说明它的codepen:http ://codepen.io/poopsplat/pen/cGBLy
对于相同的阴影,但仅在顶部:
box-shadow: inset 0px 6px 5px -5px black;
为了使阴影朝一个方向,您必须将“ blur”参数与“ spread”参数取反,然后将“ h-pos”和/或“ v-pos”参数调整为相同的值。它不适用于相反的边界或三重边界。您必须再添加一个定义。
此处有更多示例:http : //codepen.io/GBMan/pen/rVXgqP
不,不是直接的,但是您可以通过将其放入div中来裁剪不需要的部分overflow: hidden
:
我本人只是有这个问题。我发现的解决方案是使用多个框阴影(想要阴影的每一侧各有一个阴影)。这是定义:
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
这是怎么想的:
在这里,您可以看到我的盒子的三个侧面都带有阴影(左,上,右和下与背景颜色相同,以创建想要的效果)-左和右一直到底部) https://codepen.io/cponofrei/pen/eMMyQX
您可以通过将div设置为来完成单面内部阴影 overflow:hidden
并沿边框添加阴影元素。
在分区的顶部和底部边界上设置内部阴影:
的HTML
<div id="innerShadow">
<div id="innerShadowTop">
Content...
<div id="innerShadowBottom">
</div>
的CSS
#innerShadow
{
position: relative;
overflow: hidden;
}
#innerShadowTop
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
top: -1px;
-moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}
#bannerShadowBottom
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
-moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
inset
盒阴影css的值并使其具有创造力来实现。请记住,您可以在同一元素上堆叠盒子阴影。因此,可以使用@Jakobud在上面的评论中说的内容:box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;
另一种方式是,使用:before
和:after
选择器,仅比添加不必要的标记少一点令人反感。但是,如果可以直接选择原始元素并设置其样式,那么为什么要这样做。
box-shadow
适用于所有四个方面。您无法更改(是吗?)。该4种尺寸的box-shadow
定义是OffsetX
,offsetY
,Blur
和Spread
。
Inset/Outset
,OffsetX
,OffsetY
,BlurRadius
,SpreadRadius
和Color
。正如其他人指出的那样,您可以指定这样的一侧box-shadow: inset 0 8px 6px -6px black;
多个盒子阴影对我有用。
box-shadow:
inset 0 -8px 4px 4px rgb(255,255,255),
inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);