• 苹果股票价格累计下跌7.1% 市值蒸发639亿美元 2018-04-27
  • 《夏目的美丽日记》绿色度测评报告 2018-04-27
  • 景区应从门票经济转向产业经济 2018-04-27
  • 问政时刻 | 谁在“起跑线”使绊子 2018-04-27
  • 开创生态文明新时代 绘出美丽中国新图景 2018-04-26
  • 贵州桐梓:困难群众打工差点错过“移民搬迁”之后 2018-04-26
  • 国乒男女队出征第54届世乒赛“盼天晴” 2018-04-26
  • “鲶鱼”初显 “自主三强”以合作应“开放”? 2018-04-25
  • 第二批慈善组织互联网募捐信息平台遴选结果公示 2018-04-25
  • 国乒男女队出征第54届世乒赛“盼天晴” 2018-04-24
  • 崔世安会见吴政隆 双方就推进苏澳合作深入交谈 2018-04-24
  • 音乐剧《朝暮有情人》演绎港穗两地三代情 2018-04-24
  • 3月70城房价环比涨幅扩大 2018-04-24
  • 国际油价4月19日涨跌互现 2018-04-23
  • 南平市人民防空办公室成立武夷新区人防办事处 2018-04-23
  • css3阴影效果实例

    栏目: 编程语言 发布于: 2014-05-11 15:17:45

    利用CSS3的阴影属性可以在网页的元素上加上阴影效果,这是一种新特性。不过这种特性只在支持CSS3的浏览器上有效果,比如:Firefox3.5,Safari 3.1 +,和谷歌浏览器等。

    下面就说说如何使用css3的阴影属性。

    css3阴影主要用到了box-shadow属性,该属性的语法格式如下:

    box-shadow: <horizontal> <vertical> <blur> <color>

    以上各属性值的意思如下:

    horizontal(水平):指定水平偏移阴影。正值(即:5px)阴影向右,而为负值(即:- 10px)将使它偏向左。
    vertical(垂直):指定垂直偏移阴影。正值(即:5px)会使阴影在框的底部,而负值(即:- 10px)将使它偏向上。
    blur(模糊):设置的柔化半径。默认值为0,这意味着没有模糊。正值增加了模糊,而负值,实际上缩小了阴影。此属性默认为0。
    clolor(颜色):颜色值,也就是设置阴影颜色。

    提醒:该属性可以加在任意元素上,如图片,Div,SPAN,P标签等等都可以。

    下面看一个具体的阴影示例,如下是效果示例图和具体的代码:

    <html xmlns="http://www.rocksun.cn/">
    <head>
    <title>CSS3阴影效果实例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #shadow {
    	box-shadow: 10px 10px 5px #888888;
    	width:500px;
    	padding:5px;
    	text-align:center;
    	font-size:20px;
    	background:#21759b;
    	margin:0 auto;
    	color:#ffffff;
    }
    </style>
    </head>
    <body>
    <div id="shadow">矩形的 CSS3 的阴影</div>
    </body>
    </html>

    您可能感兴趣的文章

    • CSS3圆角效果实例
    • CSS透明效果,兼容IE和firefox
    • flash幻灯片切换效果代码,超简单超实用
    • jquery下拉菜单效果(超简洁实用,兼容IE和firefox等主流浏览器)
    • 网页缓存Js,css以及图片导致页面刷新无效果的三种解决办法
    • .htaccess伪静态实例分享
    • 显示行号的文本框效果,兼容ie、火狐等浏览器
    • Lee dialog 超好的弹出层效果,基于jquery插件
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:css3阴影效果实例
    IT技术书籍推荐:
    细说PHP(精要版)
    细说PHP(精要版)
    高洛峰 (作者), LAMP兄弟连 (编者)
    PHP是开发Web应用系统最理想的工具,拥有易于使用、功能强大、成本低廉、安全性高、开发速度快且执行灵活等优点?!断杆礟HP(第2版)》自出版以来,销售一路在同类书籍中领先,已成为PHP学习者首选的工具书。为了可以让读者携带方便及更精准地掌握PHP的重点、要点,同时能使之作为大学计算机系PHP教材普及,特别推出《细说PHP精要版》。本书是以《细说PHP(第2版)》为基础,提取出精华内容,都是PHP开发中必须需要掌握的技术点。全书以实用为目标设计,包含PHP开发中必备的各项技术,对已列出的每一个知识点都进行了深入详细的讲解,并附有大量的经典实例代码,图文并茂,并且侧重介绍了PHP的相关技术在实际Web开发中的应用。