今天课堂上有学生问到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. Xshell6会话管理器无意中关闭,在哪里打开

    一.进入查看 二.勾选则弹出,然后双击窗口即可

  2. pytest的allure的环境配置

    一.下载地址: https://github.com/allure-framework/allure2/releases 二.配置环境变量: 三.验证allure安装成功

  3. redis常用命令练习

    redis-server redis-cli select 0-15 redis key: string\hash\list\set\sortedset 1.增删改查... keys * 所有key ...

  4. IDEA骚技巧

    1. var 声明 2. null 判空 3. notnull 判非空 4. nn 判非空 5. for 遍历 6. fori 带索引的遍历 7. not 取反 8. if 条件判断 9. cast ...

  5. Django OperationalError错误解决

    Django项目实践中通过页面http://127.0.0.1:8000/admin/添加数据时报错,见下图 解决方法: 参考链接: https://stackoverflow.com/questio ...

  6. pytest初始化与清除fixture(二)

    @pytest.fixture用法 1.导入pytest模块:import pytest 2.调用装饰器函数:@pytest.fixture(callable_or_scope=None,*args, ...

  7. 【VBS】获取文件夹大小

    文件截图: 运行结果: 第一步:编写脚本 GetFloderSize.vbs 1 '获得文件夹的大小 by 王牌飞行员(https://www.cnblogs.com/KMould/p/1233481 ...

  8. 云原生时代的Java

    原文链接(作者:周志明):https://time.geekbang.org/column/article/321185 公开课链接:https://time.geekbang.org/opencou ...

  9. 远程连接MySQL错误“plugin caching_sha2_password could not be loaded”的解决办法

    远程连接MySQL错误"plugin caching_sha2_password could not be loaded"的解决办法 问题描述: 今天在阿里云租了一个服务器,当我用 ...

  10. 【spring源码系列】之【Bean的生命周期】

    为源码付出的每一分努力都不会白费. 1. Bean的实例化概述 前一篇分析了BeanDefinition的封装过程,最终将beanName与BeanDefinition以一对一映射关系放到beanDe ...