• 太阳城娱乐城网伟易博 2018-07-19
  • 先重组转型后变无主 帝龙文化实控人退位被"翻旧账" 2018-07-19
  • 线下数据大揭秘:南京女孩的钱都花哪儿了? 2018-07-19
  • 寒冷时节 咋防流感教你三招抵御感冒 2018-07-19
  • 100%全面屏?华为荣耀10曝光:顶配256GB空间||华为荣耀10曝光-手机行情 2018-07-19
  • 雪天寒冷 常州120一天多接到急救电话1118个 2018-07-18
  • 怀揣“警察梦” 盗贼专偷警用物品 2018-07-18
  • 创新人才教育研究会选举出第二届理事会理事 2018-07-18
  • 筽箌紈贰蟰贺礶羛甶Fantasia 2018-07-18
  • 三亚开通至保亭陵水3条城际旅游公交线路 20分钟发一班车 2018-07-18
  • 苹果AR新技术或让你生活大爆炸 这些公司已布局(股) 2018-07-18
  • 合众人寿阜阳中支因部分保单客户信息不真实被罚款10万元 2018-07-17
  • 顾客网购电视安装时发现屏裂 因已开箱无法正常退货 2018-07-17
  • 20多年未开口的央视女主播 在政协会上说了什么? 2018-07-17
  • 为什么只有韩国能生产大尺寸OLED?中国不行 2018-07-16
  • 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开发中的应用。