记录box-shadow常用的取值

已于 2024-08-08 20:07:57 修改
阅读量128 收藏
点赞数 2
分类专栏： CSS 文章标签： css
于 2024-08-08 14:10:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35641191/article/details/141025514
版权

 这几个阴影取值可以给div增加立体感的效果，记录一下备用

box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.05);

box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.16);

box-shadow: 0px 0px 4px 1px rgba(6,72,151,0.2);
夏与冰
关注
专栏目录
css box-shadow阴影不透明的解决办法
09-25
在网页设计中，CSS的box-shadow属性常被用来为元素添加阴影效果，以增加层次感和立体感。然而，在实际使用box-shadow时，我们可能会遇到一些问题，比如阴影并不是完全透明的效果，而是显示出一定的不透明度。这个...
CSS3属性box-shadow使用指南
01-19
今天比较忙，没能好好看新东西，就记录一个常用的CSS3属性吧：box-shadow，表示阴影，如果设置了border-radius圆角，则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法： Formal ...
CSS3box-shadow属性详解
热门推荐
巧克力很苦的小博客
04-27 10万+
CSS3 --添加阴影（盒子阴影的使用） CSS3 - 给div或者文字添加阴影（盒子阴影、文本阴影的使用） CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍box-shadow阴影的使用： 1、盒子阴影box-shadow box-shadow属性向box添加一个或多个阴影。 语法： box-shadow: of...
阴影 box-shadow
Wangxinlei_King的博客
09-16 181
语法： box-shadow：none | <shadow> [ , <shadow> ]* <shadow> = inset? && <length>{2,4} && <color>? 默认值：no...
CSS3 box-shadow属性设置阴影效果用法大全
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
11-19 2638
CSS3 box-shadow 属性用来向边框添加一个或多个阴影效果，该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定，省略长度的值是 0。利用该属性我们几乎可以实现我们想要的任何阴影效果，而box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。 box-shad...
【CSS】box-shadow属性
m0_49442965的博客
11-07 1258
阴影类型：内阴影（insert）/外阴影为默认值。像素值3 ：阴影模糊半径（可选属性）像素值4 ：阴影扩展半径，不可为负值。像素值1 ：水平阴影位置，可以负值。像素值2 ：垂直阴影位置，可以负值。
CSS投影 box-shadow
dk123sw的博客
12-30 764
先看一个例子 box-shadow: 2px 3px 4px rgba(0,0,0,.5); (1) 以该元素相同的尺寸1和位置，画一个rgba(0,0,0,.5) 的矩形。（之后称这个矩形为盒子） (2) 把它向右移2px，向下移3px。 (3) 使用高斯模糊算法（或类似算法）将它进行4px 的模糊处理。这在 本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模 糊...
怎样给边框添加阴影？CSS3属性box-shadow帮你搞定！
WangMin@汪末末
04-09 4560
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 关于box-shadow属性，有的小伙伴可能用的时候直接复制已有的，并没有仔细了解过box-shadow属性的参数分别是什么含义，最后导致阴影的样式不能按照自己的需求自由控制，让自己感到很苦恼。接下就一起来好好学习这个属性吧！！ 以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! ???? 后续继续更新!! ...
CSS3阴影 box-shadow的使用和技巧总结
Kuroko's Development Notes
05-18 980
本文转自：http://blog.csdn.net/freshlover/article/details/7610269     text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius...
阴影box-shadow详解
CCG_T的博客
09-06 1901
（一）box-shadow的基础语法：给块元素设置阴影。 （1）h-shadow为负值代表左边框设置阴影；若为正值代表右边框设置阴影；若为0则代表左右两边都设置阴影。 （2）v-shadow为负值代表顶部设置阴影；若为负值代表底部设置阴影；若为0则代表顶部和底部两边都设置阴影。 （3）blur：只能取非负值，取值为0时代表阴影不具有模糊效果，取值越大代表代表阴影边缘越模糊。 （4）spr
box-shadow属性的参数设置取值
程序员阿坤的博客
09-26 4207
box-shadow属性的参数设置取值
css的选择器有哪些？权重由大到小是怎么排序的？
BANaanaa的博客
09-10 674
来看看css的选择器与权重比吧
js的书写位置和css的书写位置的区别？为什么要这样写？
QQ1257871322的博客
09-10 302
这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2200
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
css 个人喜欢的样式 速查笔记
waterHBO的博客
09-07 413
记录自己喜欢的， 觉得比较好看的 css.下次用的时候，直接复制，很方便。
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 236
【代码】css鼠标移动过去变成手的图标。
CSS 笔记 1
最新发布
waterHBO的博客
09-12 373
限制最大高度 300 像素， flex-grow: 1;让 当前元素 在剩余空间中， 占据尽可能多的高度，确保它能在中间居中。上下填充 20px，左右填充为0。铺满整个浏览器窗口的宽度。占据父元素的 100%
box-shadow最好看的参数
10-08
box-shadow属性的参数可以根据你想要的效果来选择。以下是一些常用的参数： 1. 水平偏移量：可以使用负值使阴影向左偏移，使用正值使阴影向右偏移。 2. 垂直偏移量：可以使用负值使阴影向上偏移，使用正值使阴影向下偏移。 3. 模糊半径：控制阴影的模糊程度。较大的值会创建一个更模糊的阴影效果。 4. 扩展半径：控制阴影的扩展范围。较大的值会使阴影更宽，较小的值会使阴影更窄。 5. 阴影颜色：可以使用颜色名称、十六进制、RGB或RGBA值来指定阴影的颜色。 以下是一些示例，你可以根据需要进行调整： 1. box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 这个参数会在目标元素的右下方创建一个稍微模糊的灰色阴影。 2. box-shadow: -2px -2px 4px rgba(255, 0, 0, 0.5); 这个参数会在目标元素的左上方创建一个稍微模糊的红色阴影。 3. box-shadow: 0 0 10px rgba(0, 0, 255, 0.8); 这个参数会在目标元素周围创建一个深蓝色的阴影，模糊程度较高。 请注意，box-shadow属性还支持多个阴影效果，你可以使用逗号将它们分隔开。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值