box–shadow_shadowboxing

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

首先我们来看它的语法:

box–shadow_shadowboxing

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

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

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

blur:模糊距离

spread:阴影的尺寸

color:阴影的颜色

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

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

如下图所示:

正值

box–shadow_shadowboxing

box–shadow_shadowboxing

负值

box–shadow_shadowboxing

box–shadow_shadowboxing

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

如下图所示:

负值

box–shadow_shadowboxing

box–shadow_shadowboxing

正值

box–shadow_shadowboxing

box–shadow_shadowboxing

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

值为0:

box–shadow_shadowboxing

box–shadow_shadowboxing

值不为0

box–shadow_shadowboxing

box–shadow_shadowboxing

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

 

 box–shadow_shadowboxing

box–shadow_shadowboxing

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

box–shadow_shadowboxing

box–shadow_shadowboxing

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

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167858.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号