如何使用CSS3中box-shadow来制作边框阴影?(代码教程)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于如何使用CSS3中box-shadow来制作边框阴影?(代码教程),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

box-shadow属性简介

边框阴影,是一种很常见的特效。

以前在CSS2.1时,如果想要为元素添加边框阴影(就像上图那样),也是只能通过背景图片的方法来实现。

在CSS3中,我们可以使用box-shadow属性轻松地为元素添加阴影效果。

语法:

box-shadow:x-shadow  y-shadow  blur  spread  color  inset;

说明:

(1)x-shadow:设置水平阴影的位置(X轴),可以使用负值;

(2)y-shadow:设置垂直阴影的位置(y轴),可以使用负值;

(3)blur:设置阴影模糊半径;

(4)spread:扩展半径,设置阴影的尺寸;

(5)color:设置阴影的颜色;

(6)inset:这个参数默认不设置。默认情况下为外阴影,inset表示内阴影。

举例:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS3 box-shadow属性</title>     <style type="text/css">     #div1     {         width:200px;         height:100px;         border:1px solid silver;         box-shadow:5px 5px 8px red;     }     </style> </head> <body>     <div id="div1">     </div> </body> </html>

在浏览器预览效果如下:

如何使用CSS3中box-shadow来制作边框阴影?(代码教程)

水平阴影位置x-shadow和垂直阴影位置y-shadow

水平阴影位置x-shadow和垂直阴影位置y-shadow的属性取值,单位可以是px、em或百分比等,允许负值。

举例:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS3 box-shadow属性</title>     <style type="text/css">     #div1     {         width:200px;         height:100px;         border:1px solid silver;         box-shadow:-5px -5px 8px red;     }     </style> </head> <body>     <div id="div1">     </div> </body> </html>

在浏览器预览效果如下:
如何使用CSS3中box-shadow来制作边框阴影?(代码教程)

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何使用CSS3中box-shadow来制作边框阴影?(代码教程)

发表评论

提供最优质的资源集合

立即查看 了解详情