CSS3怎么设置对象盒子阴影和图片阴影
导读：本文共1323字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 一、CSS样式单词与使用语法 1、盒子阴影样式单词：box-shadow 2、语法 p{box-shadow:001px#000inset;} 代表边框间距靠左0靠上0和1px阴影范围阴影颜色为黑色（#000），有inset代表框内阴影，不带inset代表框外阴影。 注意： b... ...
目录
(为您整理了一些要点),点击可以直达。一、CSS样式单词与使用语法
1、盒子阴影样式单词：box-shadow
2、语法
p{box-shadow:001px#000inset;}
代表边框间距靠左0靠上0和1px阴影范围阴影颜色为黑色（#000），有inset代表框内阴影，不带inset代表框外阴影。
注意：
box-shadow:0px0px1px#000
第1个值为0时，代表左右边框阴影为1px范围
第1个值为正整数代表左边框阴影
第1个值为负整数代表右边框阴影
同理
第2个值为0代表上下边框阴影
第2个值为正整数代表1px阴影距离上边框多少
第1个值为负整数代表下边框阴影设置
3、浏览器兼容图
微信截图_20181016140609.png浏览器兼容一览表图
二、pCSS5案例
pCSS5分别对p盒子和图片IMG设置内阴影和外阴影为案例。
1、案例HTML代码
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>对象阴影在线演示DIVCSS5VIP</title>
<linkhref="images/style.css"rel="stylesheet"type="text/css"/>
<!--www..com-->
</head>
<body>
<div>盒子对象阴影测试</div>
<divclass="box">DIV盒子内阴影</div>
<div>图片对象阴影测试</div>
<divclass="box2"><imgsrc="images/45.gif"/></div>
</body>
</html>
2、案例CSS代码
.box{box-shadow:5px2px6px#000inset;width:300px;height:80px;margin:0auto}
.box2img{box-shadow:5px2px6px#000}
分别设置p对象内阴影效果和图片外阴影效果
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">CSS3怎么设置对象盒子阴影和图片阴影的详细内容，希望对您有所帮助，信息来源于网络。