• MINI车联网服务3月起升级至4G网络 增加新功能 2018-02-18
  • 以色列警方:已有足够的证据可以用于起诉以总理 2018-02-18
  • 冬奥会短节目第四 金博洋:伤病令我更强大 2018-02-18
  • 天津市北辰区委书记冯卫华:强化政治担当 把主体责任落实落细 2018-02-17
  • 正月初一客流继续回落 全国铁路预计发送旅客389万人次 2018-02-17
  • 送别余光中:诗人虽远行,乡愁永流传 2018-02-17
  • 集团原董事长违纪被查 人员伤亡事故频发 湖北宜化:去年亏损额超过公司市值 2018-02-17
  • 图片故事:“六个人”的火车站 2018-02-16
  • 【马来西亚房产】雅诗阁之星十年包租可续租! ——凤凰网房产马来西亚 2018-02-16
  • 大量顺差在中国,多数利润归美国 2018-02-16
  • 河北今年将削减煤炭消费500万吨 2018-02-16
  • 开创生态文明新时代 绘出美丽中国新图景 2018-02-15
  • 以色列警方:已有足够的证据可以用于起诉以总理 2018-02-15
  • 山东求败让辽篮意外受益 与所在半区其他四队常规赛战绩为7胜1负 2018-02-15
  • 春节期间乌鲁木齐电力营业厅每天11时至14时30分营业 2018-02-14
  • 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开发中的应用。