作者:星寴 | 来源:互联网 | 2023-05-26 13:40
本篇内容主要讲解“CSS3怎么设置对象盒子阴影和图片阴影”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3怎么设置对象盒子阴影和图片阴影”吧!
一、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代码
盒子对象阴影测试
DIV盒子内阴影