box-shadow: 1px 2px 3px rgba(0,0,0,0.2)的含义

最新推荐文章于 2025-06-30 22:07:10 发布

原创最新推荐文章于 2025-06-30 22:07:10 发布 · 1.4w 阅读

6 ·

CC 4.0 BY-SA版权

博客介绍了CSS中阴影和颜色值的参数含义。阴影部分，1px为水平偏移值，2px为垂直偏移值，3px为模糊值；颜色值rgba(0,0,0,0.2)中，前三个0分别代表R、B、G，0.2表示透明度为20%。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1px：阴影水平偏移值（可取正负值）；
2px：阴影垂直偏移值（可取正负值）；
3px：阴影模糊值；

rgba(0,0,0,0.2)中：

第一个0：R

第二个0：B

第三个0：G

第四个0.2表示透明度为20%。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

勤奋的小米蜂

关注关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

CSS阴影效果(Box-shadow)用法趣味讲解

kleinBlue.的博客

09-28

820

分享：使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。基本用法 box-shadow:2px 2px 5px #000; ...

CSS3阴影box-shadow

火星男孩的分享空间

06-15

box-shadow:1px 2px 3px 4px #ccc inset；来分别看一下以上六个值的含义： 1px 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）； 2px 从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）； 3px 阴影的模糊度，只允许为正值； 4px 阴影扩展半径； #ccc 阴影颜色； inset 设置为内阴影（如果不写这个值，默认为外阴影）；坐标 <html> <head>

参与评论您还未登录，请先登录后发表或查看评论

css3中-moz、-ms、-webkit各什么意思

weixin_33858249的博客

11-20

259

-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性转载于:https://blog.51cto.com/vincent1992/1580254

CSS box-shadow属性使用详解

最新发布

BillKu的博客

06-30

801

在小屏幕上减少阴影尺寸：css复制下载。

阴影设置box-shadow

Macdull2014的博客

09-03

197

box-shadow: 1px 2px 5px 6px #888888 inset 1px: 必须，水平阴影的位置, 负值为左 2px: 必须，垂直阴影的位置, 负值为上; 5px: 可选，模糊距离; 6px: 可选，阴影尺寸; 888888: 可选，阴影颜色; inset: 可选，将外部阴影 (outset) 改为内部阴影。转载于:https://ww...

CSS技巧-rgba函数的妙用

weixin_30378311的博客

12-21

769

先简单介绍一下：　　rgba()函数是平时开发中经常遇到的，这篇文章也做了一个比较详细的解读以及一系列的应用。　　对它的工作原理做一番分析：就是具有一定透明度的盒子；　　还比较了rgba()函数和不透明度属性（opacity）的区别：使用 opacity，所有子元素都会受到影响；　　在实际开发中，有些地方用rgba()函数也更加方便：为网站 header 定制主题、文章标题、按钮、...

10-CSS背景及应用

qq_43260366的博客

08-04

349

CSS背景 1、背景颜色 background-color 1)样式：background-color:颜色值； 2）如果不写颜色值默认是透明色transparent; 2、背景图片 background-image 1)样式： [1]background-image:url(路径地址)；---地址不加引号 [2]background-image:none；—没有图片； 2）注意： [1]图片放在盒子的底部，如果写内容可以覆盖图片； [2]默认图片为平铺的,如果一张图片的大小和盒子大小不一致，会生成两张

table { max-width: 445px; border-collapse: collapse; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); overflow: hidden; } 这个呢

05-31

这是一段 CSS 代码，用于设置...- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); ：表格阴影效果为 0 偏移量、2 像素模糊半径、4 像素扩散半径、不透明度为 0.2 的黑色阴影。 - overflow: hidden; ：表格内容溢出时隐藏。

box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);

02-24

在给定的代码中，box-shadow属性的值为"inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2)"，它包含了四个参数： 1. inset：表示阴影是内部阴影。 2. 0：表示阴影的水平偏移量为0，即阴影不偏移。 3. -1px：表示阴影的垂直...

<!DOCTYPE html><html><head> <title>嵌入式设备登录</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div class="login-box"> <img src="background.jpg" class="background"> <h1>设备登录</h1> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <input type="submit" value="登录"> </form> </div></body></html>body { background-color: #f2f2f2;}.login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; padding: 50px; border-radius: 10px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);}.background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter: blur(5px);}h1 { margin: 0 0 30px; padding: 0; font-size: 28px; text-align: center; color: #333; text-shadow: 2px 2px 2px rgba(0,0,0,0.2);}form { display: flex; flex-direction: column;}label { margin-bottom: 10px; font-size: 18px; color: #333; text-shadow: 2px 2px 2px rgba(0,0,0,0.2);}input[type="text"], input[type="password"] { padding: 10px; border: none; border-radius: 5px; background-color: #f2f2f2; color: #333; box-shadow: inset 0 0 5px rgba(0,0,0,0.2);}input[type="submit"] { margin-top: 20px; padding: 10px; border: none; border-radius: 5px; background-color: #f90; background-image: linear-gradient(to bottom, #f90, #f60); color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 2px 2px rgba(0,0,0,0.2);}input[type="submit"]:hover { background-image: linear-gradient(to bottom, #f60, #f90);}合并以上代码

06-08

以下是整合后的完整代码： ...<!... 嵌入式设备登录 ... box-shadow: 0 2px 2px rgba(0,0,0,0.2); } input[type="submit"]:hover { background-image: linear-gradient(to bottom, #f60, #f90); } ```

box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);高度改低一点

05-21

box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); ``` 可以修改成： ``` box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); ``` 这样就可以将阴影的高度变低了。当然，具体要调整多少还要根据您实际的需求来确定。

二、css知识点2

清风的博客

07-18

262

二、css学习笔记（2） 1. CSS复合选择器复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 1.1 后代选择器概念：后代选择器又称为包含选择器作用：用来选择元素或元素组的子孙后代父级子级{属性:属性值;属性:属性值;} 1.2 子元素选择器作用：子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。其写法就是把父级标签写在前面，子...

RGBA: 了解

sunlight_01的博客

05-24

3409

RGBA: 了解 rgba（0，0，0，0）四个值，前三个值的范围是0~255之间的整数或0-100的百分数前三个值，描述的是三原色，最后一个则代表透明度选值在0~1之间： 0 表完全透明 0.5 表板透明 1 表完全不透明的rgba ...

css color 之间的转换与一些最佳实践

qq_33495944的博客

11-05

471

近期BA要求把rgba转换成16进制的颜色，所以研究了一下怎么转换，以下是转换的方法（1）rgba -> rgb target = opacity * overlay + (1 - opacity) * background; // rgba(0,0,0,0.2) -> rgb(204, 204, 204) => 0 * 0.2 + (1 - 0.2) * 255 (2) ...

常用样式-阴影变化

weixin_30265103的博客

01-30

183

.item { 　　border: 1px solid #f3f3f3; 　　box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.10); 　　transition: box-shadow 0.2s; 　　&:hover { 　　　　box-shadow: 0 2px 4px 0 rgb...

小程序实战二

C安君的博客

08-27

194

实现个人头像设置 .avatar{ height: 400rpx; background-color: #f60; } .avatar image{ width: 200rpx; height:200rpx; border: 10rpx solid rgba(0, 0, 0, .2); border-radius: 50%; //圆形边框由此处的两个属性决定 } 全...

css中rgba的属性

Catlin Share

11-26

699

rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。红色（R）0 到 255 间的整数，也可以使用百分比 0% ~ 100%,代表颜色中的红色成分。。绿色（G）0 到 255 间的整数，也可以使用百分比 0% ~ 100%,代表颜色中的绿色成分。蓝色（B）0 到 255 间的整数，也可以使用百分比 0% ~ 100%,代表颜色中的蓝色成分。透明度（A）

常用文字阴影和盒子阴影效果汇总

qq_46664185的博客

10-27

1220

一、盒子阴影-----box-shadow 1.box-shadow:2px2px2px2pxrgba(0,0,0,.3); 2.box-shadow:0px8px16px0pxrgba(0,0,0,0.2); 3. box-shadow:10px 14px 32px -2pxrgba(0, 0, 0, 0.2); 二、文字阴影------text-shadow 1.text-shadow: 2px 2px 4px #000000; 2...

css基础以及css3

m0_72711350的博客

01-04

882

css

box-shadow: 2px 2px 4px slategray;

04-25

box-shadow是CSS中的一个属性，用于给元添加阴影效果。它的语法如下： box-shadow: h-shadow v-shadow blur spread color; 其中，各个参数的含义如下： - h-shadow：水平方向上的阴影偏移量，可以为正值（向右偏移）或负值（向左偏移）。 - v-shadow：垂直方向上的阴影偏移量，可以为正值（向下偏移）或负值（向上偏移）。 - blur：模糊半径，用于控制阴影的模糊程度。值越大，阴影越模糊，可以为0。 - spread：阴影的尺寸扩展量，可以为正值（扩大阴影尺寸）或负值（缩小阴影尺寸），默认为0。 - color：阴影的颜色，可以使用具体的颜色值（如slategray）或者rgba()、hsla()等颜色表示方式。对于给定的box-shadow属性值 "2px 2px 4px slategray"，它表示一个水平偏移量为2px，垂直偏移量为2px，模糊半径为4px的slategray颜色阴影效果。