热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS3怎么设置对象盒子阴影和图片阴影

本篇内容主要讲解“CSS3怎么设置对象盒子阴影和图片阴影”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学

本篇内容主要讲解“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盒子内阴影

   

图片对象阴影测试

   

   

   

    2、案例CSS代码

    .box{box-shadow:5px2px6px#000inset;width:300px;height:80px;margin:0auto}

    .box2img{box-shadow:5px2px6px#000}

    分别设置p对象内阴影效果和图片外阴影效果
CSS3怎么设置对象盒子阴影和图片阴影CSS3怎么设置对象盒子阴影和图片阴影

到此,相信大家对“CSS3怎么设置对象盒子阴影和图片阴影”有了更深的了解,不妨来实际操作一番吧!这里是编程笔记网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


推荐阅读
author-avatar
星寴
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有