我正在尝试在所有四个面上应用
box-shadow
。我只能从两侧得到它:
这是因为 x 和 y 偏移。试试这个:
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
编辑(一年后..):按照评论中的要求,使答案更加跨浏览器:)
btw:现在有很多 css3 生成器.. css3.me,css3maker,css3generator等...
参见:http://jsfiddle.net/thirtydot/cMNX2/8/
input {
-webkit-box-shadow: 0 0 5px 2px #fff;
-moz-box-shadow: 0 0 5px 2px #fff;
box-shadow: 0 0 5px 2px #fff;
}
就像这段代码一样简单:
box-shadow: 0px 0px 2px 2px black; /*any color you want*/
理解 box-shadow 语法并相应地编写
box-shadow: h-offset v-offset blur spread color;
h-offset:阴影的水平偏移。正值将阴影置于框的右侧,负值将阴影置于框的左侧 - 必需
v-offset:阴影的垂直偏移。正值将阴影置于框下方,负值将阴影置于框上方 - 必需
blur:模糊半径(数字越大,阴影越模糊)-可选
颜色:阴影的颜色 - 可选
spread:扩展半径。正值会增加阴影的大小,负值会减小阴影的大小 - 可选
插图:将阴影从外部阴影更改为内部阴影 - 可选
box-shadow: 0 0 10px #999;
box-shadow 与展开效果更好
box-shadow: 0 0 10px 8px #999;
使用“inset”在框内应用阴影
box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;
使用rgba(红绿蓝alpha)更有效地调整阴影
box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8);
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);
这看起来很酷。
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
最简单的解决方案和最简单的方法是为所有四个边添加阴影。 CSS
box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
我找到了 http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ 网站。
.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
就这么简单:
box-shadow: 3px 3px 5px rgb(186 195 78), -3px -3px 5px rgb(186 195 78);
box-shadow: 0px 0px 4px 4px #000;
地点:
offset-x
和 offset-y
blur radius
spread radius
另外,您可以使用 CSS 盒子阴影生成器
在线生成盒子阴影
- 每面颜色相同
:root{
--color: #f0f;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background: #ccc;
}
.four-sides-with-same-color {
box-shadow: 0px 0px 10px 5px var(--color);
}
<div class="four-sides-with-same-color"></div>
- 每面都有不同的颜色
:root{
--color1: #00ff4e;
--color2: #ff004e;
--color3: #b716e6;
--color4: #FF5722;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background-color: rgba(255,255,0,0.7);
}
.four-sides-with-different-color {
box-shadow:
10px 0px 5px 0px var(--color1),
0px 10px 5px 0px var(--color2),
-10px 0px 5px 0px var(--color3),
0px -10px 5px 0px var(--color4);
}
<div class="four-sides-with-different-color"></div>
对所有四个边使用此 css 代码: 框阴影:0px 1px 7px 0px rgb(106, 111, 109);
您可以通过以下链接进行不同的组合。
https://www.cssmatic.com/box-shadow
您需要的结果可以通过以下CSS实现
-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
以 (v1)px (v2)px (v3)px (v4)px 为例。 v1px 当正值时给出右侧阴影,而负值时给出左侧阴影。 v2px 当正值时给出顶侧阴影,而负值时给出底侧阴影。 v3 用于使阴影模糊。 10px 会使阴影比 5px 更模糊,依此类推 因此使用具有以下样式的 div (mydiv)。我们会得到下图
box-shadow:
30px 0px 5px 0px red,
0px 30px 5px 0px blue,
-30px 0px 5px 0px green,
0px -30px 5px 0px yellow;
width:200px;
height:200px;
margin-left:100px;
}
<br><br>
<div class="mydiv"></div>
This should give you the div below
view the result from this link: https://i.stack.imgur.com/bUjRN.jpg
将此行添加到您的框样式中。
box-shadow: 0 0 0 width color;
例如:
box-shadow: 0 0 0 5px yellow;
您可以在此处找到更多详细信息MDN Web 文档 - 将偏移和模糊设置为零
将 x 和 y 偏移设置为负值,以便将阴影也应用到容器的左侧和顶部。
div { box-shadow: 1px 1px 1px 1px #BDBDBD, -1px -1px 1px 1px #BDBDBD; }
在上面的代码块中,
1px 1px 1px 1px #BDBDBD
用于在右侧和底部添加阴影。-1px -1px 1px 1px #BDBDBD
用于在顶部和左侧添加阴影。我完全同意 Seshu Vuggina 的观点。使用 box-shadow(特别是使用 inset)会产生很好的效果。 https://codepen.io/don199/pen/abMLpLY
.container{
width: 100vw;
}
.button {
box-shadow: inset 0 0 1px 1px #595959;
border-radius: 4px;
background: linear-gradient(180deg, rgba(166,166,166,1) 0%, rgba(204,204,204,1) 50%, rgba(166,166,166,1) 100%);
border: solid #b3b3b3 2px;
text-shadow: 1px 1px 0px #ddd;
padding: 4px 20px;
cursor: pointer;
margin: 0 auto;
display: block;
}