首页 / CSS3 / css3实现阴影效果实例

css3实现阴影效果实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css3实现阴影效果实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1733字，纯文字阅读大概需要3分钟。

内容图文

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。本章内容我们将为大家讲一个简单的css3阴影效果实例。利用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.phpernote.com/">
<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的简单的小教程，希望能帮助到大家。

相关推荐：

CSS3 画各种基本图形小技巧

CSS3自定义滚动条样式的示例详解

css3动画中圆形运动轨迹的实现

以上就是css3实现阴影效果实例的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css3实现阴影效果实例全部内容，希望文章能够帮你解决css3实现阴影效果实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/412893.html

来源：【匿名】