本文介绍了将CSS3框阴影设置为不在div的顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个带有框阴影设置的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的左边,右边和底部

解决方案

.

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的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-27 19:13