今天课堂上有学生问到box-shadow这个属性,那么下面我们就来详细的解说下这个属性它的用法,box-shadow是css3中的一个属性,它可以向框添加一个或多个阴影。

首先我们来看它的语法:

box-shadow属性接收一个由5个参数组成的值,每个值的意思如下:

h-shadow: 水平阴影的位置。

v-shadow:垂直阴影的位置。

blur:模糊距离

spread:阴影的尺寸

color:阴影的颜色

接下来我们通过几个实例来加深对这些值的理解:

1.h-shadow:这个值指定了阴影的水平偏移量。即在x轴上阴影的位置。如果是正数阴影会出现在元素的右边,如果是负值阴影出现在元素的左边。

如下图所示:

正值

负值

2.v-shadow:这个值指定了阴影的垂直偏移量。即在y轴上阴影的位置。如果是正值阴影会出现在元素的上边,如果是负值阴影会出现在元素的下边。

如下图所示:

负值

正值

3、blur:这个值代表阴影的模糊半径,如果是“0”意味着阴影是完全实心的,没有任何模糊效果。该值越大,实心度越小,阴影越朦胧和模糊,该值不支持负数。

值为0:

值不为0:

4:spread这个值代表着阴影的尺寸。这个值可以被看作是从元素到阴影的距离。如果正值会在元素的四个方向延伸阴影。负值会使阴影变得比元素本身尺寸还要小。默认值“0”会让阴影变得得和元素的大小一样。

5:color:这个值是指定阴影的颜色

通过以上的demo,我相信现在大家对box-shadow这个属性的用法也理解得不错了,更多的web前端知识详解,请大家持续关注。。。。。。。。。。。。

(php开发,web前端,ui设计,vr开发专业培训机构,v客学院版权所有,转载请注明出路,谢谢!!!)

box-shadow详解的更多相关文章

  1. Windows渗透利器之Pentest BOX使用详解(一)

    内容概览:                                     知识科普                                    优缺点总结 功能参数详解翻译: 控制 ...

  2. 【转载】/etc/passwd & /etc/shadow 详解

    转载自:http://blog.csdn.net/snlying/article/details/6130468 1,passwd文件passwd文件存放在/etc目录下.这个文件存放着所有用户帐号的 ...

  3. 边框回归(Bounding Box Regression)详解

    原文地址:http://blog.csdn.net/zijin0802034/article/details/77685438 Bounding-Box regression 最近一直看检测有关的Pa ...

  4. [转]边框回归(Bounding Box Regression)详解

    https://blog.csdn.net/zijin0802034/article/details/77685438 Bounding-Box regression 最近一直看检测有关的Paper, ...

  5. 【边框回归】边框回归(Bounding Box Regression)详解(转)

    转自:打开链接 Bounding-Box regression 最近一直看检测有关的Paper, 从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到今年 ...

  6. [转]CNN目标检测(一):Faster RCNN详解

    https://blog.csdn.net/a8039974/article/details/77592389 Faster RCNN github : https://github.com/rbgi ...

  7. 转载:Faster-RCNN详解

    原文:http://blog.csdn.net/zy1034092330/article/details/62044941 原文大神有很多经典之作,并且讲解得很透彻,建议前往,这里仅当学习使用. Fa ...

  8. Linux用户、用户组权限管理详解

    Linux用户管理三个重要文件详解: Linux登陆需要用户名.密码./etc/passwd 文件保存用户名.登录Linux时,Linux 先查找 /etc/passwd 文件中是否有这个用户名,没有 ...

  9. linux之用户和用户组管理详解

    #############用户和用户组管理###################linux只认识UID和GID #可在/etc/passwd 和/etc/group中找到 ##/etc/passwd ...

  10. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

随机推荐

  1. Cuda Stream流分析

    Cuda Stream流分析 Stream 一般来说,cuda c并行性表现在下面两个层面上: Kernel level Grid level Stream和event简介 Cuda stream是指 ...

  2. LongAdder源码阅读笔记

    功能描述 LongAdder通过创建多个副本对象,解决了多线程使用CAS更新同一个对象造成的CPU阻塞,加快了对线程处理的速度.当多个线程同一时刻更新一个AtomicLong类型的变量时,只有一个线程 ...

  3. AgileConfig轻量级配置中心1.3.0发布,支持多用户权限控制

    AgileConfig 当初是设计给我自己用的一个工具,所以只设置了一道管理员密码,没有用户的概念.但是很多同学在使用过后都提出了需要多用户支持的建议.整个团队或者整个公司都使用同一个密码来管理非常的 ...

  4. 实验2、Flask模板、表单、视图和重定向示例

    实验内容 1. 实验内容 表单功能与页面跳转功 能是Web应用程序的基础功能,学习并使用他们能够更好的完善应用程序的功能.Flask使用了名为Jinja2的模板引擎,该引擎根据用户的交互级别显示应用程 ...

  5. 《吃透MQ系列》之扒开Kafka的神秘面纱

    大家好,这是<吃透 MQ 系列>的第二弹,有些珊珊来迟,后台被好几个读者催更了,实属抱歉! 这篇文章拖更了好几周,起初的想法是:围绕每一个具体的消息中间件,不仅要写透,而且要控制好篇幅,写 ...

  6. xshell连接时报错:Could not connect to '192.168.2.125' (port 22): Connection failed.

    解决思路: 1.首先用主机ping下虚拟机IP,看是否能ping通 2.如果ping不通就看虚拟机防火墙是否开启,service iptables status [root@mysql ~]# ser ...

  7. Golang修改操作系统时间

    Golang修改操作系统时间 需求 程序有时需要和服务器对时,发现延迟过高修改本地时间,这段代码网上抄的,实测可用,windows环境需要以管理员身份启动命令提示符调试 实现Demo package ...

  8. 手摸手,带你用Beego撸商城系列二(登录篇)

    完整项目地址: go-shop-b2c 系列文章: 手摸手,带你用 Beego撸商城 系列一(基础篇) 手摸手,带你用 Beego撸商城 系列二(登录篇) 手摸手,带你用 Beego撸商城 系列三(系 ...

  9. ceph-csi源码分析(6)-rbd driver-nodeserver分析(下)

    更多 ceph-csi 其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(6)-rbd driver-nodeserver分析(下) 当c ...

  10. 学Java,找对圈子,跟对人

    我大学学的是机械专业,到大四才决定要学Java,以后当一名程序员. 到现在,十几年过去了,我现在已经是一家上市公司的技术总监了,管理的技术团队有100多人.很庆幸当初了选择了学Java. 还记得当初学 ...