盒子阴影 – box-shadow

已于 2022-07-30 11:13:16 修改
阅读量611 收藏 1
点赞数
分类专栏： 前端学习小记 文章标签： css html css3
于 2022-07-29 22:27:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coolchaobing/article/details/126065135
版权

box-shadow属性可以设置一个或者多个阴影

  • 每个阴影用<shadow>表示；
  • 多个阴影之间用逗号,隔开，从前到后叠加；

常见格式
在这里插入图片描述

  • 第1个<length>：offset-x, 水平方向的偏移，正数往右偏移;
  • 第2个<length>：offset-y, 垂直方向的偏移，正数往下偏移;
  • 第3个<length>：blur-radius, 模糊半径;
  • 第4个<length>：spread-radius, 延伸半径;
  • <color>：阴影的颜色，如果没有设置，就跟随color属性的颜色;
  • inset：外框阴影变成内框阴影;
    在这里插入图片描述

我们可以通过一个网站测试盒子的阴影
https://html-css-js.com/css/generator/box-shadow/
在这里插入图片描述

coolchaobing
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
5.盒子阴影（重点）
qq_62865634的博客
11-17 534
本文仅仅简单介绍了盒子的阴影用box-shadow属性。
详解CSS3阴影 box-shadow的使用和技巧总结
09-24
主要介绍了详解CSS3阴影 box-shadow的使用和技巧总结 ,具有一定的参考价值，有需要的可以了解一下。
box-shadow（盒子阴影）的使用
weixin_45356258的博客
12-23 3389
web前端，box-shadow属性的使用
盒子阴影box-shadow
xiguaxixixi的博客
05-23 3926
提示：box-shadow的使用说明。
前端网页学习11（css盒子阴影和文字阴影）
qq_40551957的博客
02-02 160
盒子阴影： 注意事项： 1. 默认为outset，但不写，否则会使阴影无效 2. 盒子阴影不占空间，不影响网页布局 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子
CSS系列之盒子阴影box-shadow（CSS3）
老__L的博客
01-30 2万+
本文主要介绍CSS的box-shadow属性。盒子阴影box-shadow（CSS3）
JS-Day-12 预编译，CSS属性box-shadow
い南秋乱港
06-16 277
Day-12 注： 预编译一定是先生成GO CSS属性 box-shadow 阴影效果 左负右正，上负下正。 box-shadow: inset,/*内外阴影*/ -10px 0px 10px red, /*左边阴影*/ 0px -10px 10px #000, /*上边阴影*/ 10px 0px 10px green, /*右边阴影*/ 0px 10px 10px blue; /*下边阴影*/ 参数详
css box-shadow阴影不透明的解决办法
09-25
你在使用box-shadow来实现阴影效果的时候，有没有注意到有些情况下，阴影并不是透明的效果
qt模拟CSS3之box-shadow效果
07-14
由于qss不支持css3的box-shadow效果，故而该工程中，采用类似android九点图的方式，把背景图截为9分，即4角4边一中心，并把4角4边重绘于待修饰的控件的边缘，从而模拟了box-shadow效果。
Photoshop投影与CSS中box-shadow的转换
12-13
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-...
盒子阴影主要属性介绍
qwerty0529的博客
02-24 491
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。可选 单位： px。box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影（outset默认）h-shadow：阴影的水平偏移量。v-shadow：阴影的垂直偏移量。blur：阴影模糊度，不能取负数。可选 单位： px。inset：表示添加内阴影，默认为外阴影。当 spread 为0时，阴影大小与元素大小相同。
详解 box-shadow
共同学习，心怀感激。
08-17 2万+
​今天我们来探究一下“阴影”。在学习美术的时候，接触素描，去画一个杯子，或者画一个球体，这个时候往往出现，老师画的很逼真，立体感、层次感很强。经过老师的讲解，我们知道想让我们所画的物体，具有立体感，通常有：高光，暗面，灰面，投影（阴影），这几部分组成。说完了 图形中的阴影后，来想想如何在我们的页面中绘画出阴影。这就涉及到我们今天要说的内容 CSS3 中的 box-shadow。 探究 box-shadow 在说 box-shadow 之前，大家先来看看几张图片，具体细致的感受一下 box-shado
box-shadow盒子阴影几种用法
Be myself
04-23 1万+
box-shadow盒子阴影 语法： 外阴影：box-shadow: X轴 Y轴 Rpx color; 属性说明（顺序依次对应）：阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 内阴影：box-shadow: X轴 Y轴 Rpx colorinset; 默认是外阴影 ...
操作元素之修改样式属性
leechoy
06-12 616
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
weixin_34318326的博客
03-08 312
　　《CSS3 经典教程系列》的前一篇文章向大家详细介绍了线性渐变（linear-gradient）的用法，今天本文介绍的盒阴影（box-shadow）是目前用得最多的 CSS3 特性之一。盒阴影效果和圆角效果一样都是做成图片，直接编写  CSS 代码就可以实现。 您可能感兴趣的相关文章 Web 开发人员和设计师必读文章推荐 20个非常绚丽的 CSS3 特性应用演示 35个让人...
CSS中怎样制作盒子阴影 box-shadow
xuehyunyu的博客
05-26 2091
div{ width: 200px; height: 200px; background-color: orange; /* box-shadow: 10px 20px red;*//*X方向的偏移 Y方向的偏移 阴影颜色*/ box-shadow: 10px 20px 5px
HTML5基础加强css样式篇（盒子阴影属性：box-shadow）（三十六）
余正源的博客
04-06 9707
1.box-shadow属性简介： .box { /* .box 默认样式 */ margin: 200px 0 0 200px; width: 200px; height: 200px; background-color:
CSS3 之box-shadow盒子阴影
Lhy_JL的博客
03-09 205
语法： box-shadow:h-shadow v-shadow blur spread color inset； 值 描述 h-shadow 必需。水平阴影的位置，允许负值 v-shadow 必需。垂直阴影的位置，允许负值 blur 可选，模糊的距离 spread 可选，阴影的尺寸 color 可选，阴影颜色 inset 可选，将外部阴影改为内部阴影 ...
CSS —— 盒子阴影（box-shadow）
热门推荐
ZhaoYLi 的编程学习笔记
12-24 2万+
语法 box-shadow: h-shadow v-shadow blur spread color inset; 注释: box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。省略长度的值是0。 未加阴影效果如下： 1、外阴影 a、给元素右边框和下边框加外阴影——把水平阴影位置、垂直阴影位置偏移...
盒子下阴影box-shadow
最新发布
07-29
box-shadow是CSS属性，用于在元素周围创建阴影效果。它可以接受多个值，用逗号分隔。一般情况下，box-shadow属性的语法如下： ```css box-shadow: h-shadow v-shadow blur spread color inset; ``` - h-shadow：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值