大众计算机学习网欢迎诸位!收藏本站注 册登 陆
常用教程:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 教程 > 文章页

div阴影的简单方法

Admin | 2016-1-16 8:44:26 | ReadNums | 1874 | 标签 网页制作 | 打印本页
     

  之前要设置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阴影图


问题未解决:在线咨询我要在线咨询问题

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日