Dzwebs.Net

撰写电脑技术杂文十余年

div阴影的简单方法

Admin | 2016-1-16 8:44:26 | 被阅次数 | 6517

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  之前要设置DIV的阴影,可谓难上加难,现在,要想设置DIV的阴影,可以说,易如反掌,实在很简单,为什么呢?那是以为以前的那些浏览器兼容性太差,尤其是IE6,5.0等这些低级版本的浏览器,很难实现这种阴影效果,而现在,有了CSS3以及各种浏览器的兼容,实现起来就简单多了,下面我们开始吧。

  一、先看语法

  语法

  box-shadow: h-shadow v-shadow blur spread color inset;

  注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

    值          说明
  h-shadow     必需的。水平阴影的位置。允许负值
  v-shadow     必需的。垂直阴影的位置。允许负值
  blur        可选。模糊距离
  spread       可选。阴影的大小
  color        可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
  inset        可选。从外层的阴影(开始时)改变阴影内侧阴影

  二、现在看实例

  .div
  {

   border-radius:6px;

   border:#FFCC99;

   background:#FFCC99;

   box-shadow:5px 5px 3px #aaaaaa;

  }

  就只使用上面很简单的CSS属性,就可以完成阴影效果了。如果不相信啊,你看下图就明白了。

DIV阴影图


该杂文来自: 网页制作杂文

上一篇:js或jquery如何判断网页图片是否已载入完成

下一篇:JS加载优化的方法

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计