将CSS3框阴影设置为不在div的顶部 [英] Set CSS3 box-shadow not to be on top of div

问题描述

我有一个带有框阴影设置的框与以下CSS：

  -moz-box-shadow ：1px 1px 15px＃415a68; 
 -webkit-box-shadow：1px 1px 15px＃415a68; 
 -khtml-box-shadow：1px 1px 15px＃415a68; 
 box-shadow：1px 1px 15px＃415a68; 
  

我可以做什么使box-shadow只适用于div的左侧，右侧和底部？

解决方案

/ code>

$ b

code> box-shadow 不允许同时使用右和左阴影。

有一个窍门，虽然...继续阅读。

规则有四个值：

1. 定义阴影的水平偏移。 +右侧阴影的值和 - 左侧阴影的值。


2. 定义垂直偏移。


3. 定义模糊距离


4. 定义点差

这是真的。但是，经过一些测试，我发现你可以分层阴影。

所有你需要做的就是用逗号分隔这些值。

因此，对于一个div上的左，右和底部阴影，您可以这样做：

  box-shadow：-5px 5px 3px black，5px 5px 3px black; 
  

示例： http://jsfiddle.net/jasongennaro/HWCzJ/1/

I have a div box with box-shadow set around it with the following CSS:

-moz-box-shadow: 1px 1px 15px #415a68;
-webkit-box-shadow: 1px 1px 15px #415a68;
-khtml-box-shadow: 1px 1px 15px #415a68;
box-shadow: 1px 1px 15px #415a68;

What can I do to make box-shadow only apply to the left, right and bottom of the div?

解决方案

You cannot do this with ONE div.

EDIT

box-shadow does not allow right and left shadows at the same time.

There is a trick, though...read on.

The rule takes four values:

1. defines the horizontal offset of the shadow. + value for a right shadow and - value for a left shadow.
2. defines the vertical offset. + value for a bottom shadow and - value for a top shadow.
3. defines the blur distance
4. defines the spread

That is all true. However, after some tests I found you can layer shadows.

All you need to do is separate the values with a comma.

So, for a left, right, and bottom shadow on one div, you can do this

box-shadow: -5px 5px 3px black, 5px 5px 3px black;

Example: http://jsfiddle.net/jasongennaro/HWCzJ/1/

这篇关于将CSS3框阴影设置为不在div的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！