十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇内容主要讲解“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代码
2、案例CSS代码
.box{box-shadow:5px2px6px#000inset;width:300px;height:80px;margin:0auto}
.box2img{box-shadow:5px2px6px#000}
分别设置p对象内阴影效果和图片外阴影效果
到此,相信大家对“CSS3怎么设置对象盒子阴影和图片阴影”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!