box-shadow 单边阴影 双边阴影

最新推荐文章于 2023-06-13 21:55:17 发布
最新推荐文章于 2023-06-13 21:55:17 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： css 文章标签： 单边阴影 box-shadow 双边阴影
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaohanqq/article/details/84479968
版权

单边左侧外阴影

box-shadow: -6px 0px 8px -5px #ccc;

在这里插入图片描述
单边右侧外阴影

box-shadow: 6px 0px 8px -5px #ccc;

双边阴影

box-shadow: 5px 0px 5px -5px black, -5px 0px 5px -5px black;

阴影半径很关键，为负值

单边内侧阴影：

box-shadow: inset 5px 0px 8px -5px #ccc;

你所不知道的 CSS 阴影技巧与细节

zhaohanqq
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用box-shadow 实现单边（多边）投影
weixin_41072543的博客
01-31 474
# 基础 “` box-shadow:2px 2px 5px 1px rgba(0, 0, 0, .6) inset; “` 第一个参数：设置对象的阴影的水平偏移量，可以为负数 第二个参数：设置对象的阴影的垂直偏移量，可以为负数 第三个参数：对象的阴影模糊值，不允许为负数 第四个参数：对象阴影的外延值，可以为负数 第五个参数：color 颜色 inset： 设置对象的阴影类型为内阴影。该...
css box-shadow阴影不透明的解决办法
09-25
你在使用box-shadow来实现阴影效果的时候，有没有注意到有些情况下，阴影并不是透明的效果
详解CSS3的box-shadow属性制作边框阴影效果的方法
09-24
主要介绍了CSS3的box-shadow属性制作边框阴影效果的方法,box-shadow属性还是十分强大的,能设定阴影的水平或垂直位置,以及阴影的颜色和尺寸等,需要的朋友可以参考下
IE下模拟css3中的box-shadow(阴影)效果代码
09-25
在ie下模拟css3中的box-shadow（阴影）可以使用ie的Shadow（阴影）滤镜来实现，需要注意的是该滤镜必须配合background属性一起使用，否则该滤镜失效
详解CSS3阴影 box-shadow的使用和技巧总结
09-24
主要介绍了详解CSS3阴影 box-shadow的使用和技巧总结 ,具有一定的参考价值，有需要的可以了解一下。
css阴影box-shadow上下左右阴影
localhost
06-13 6624
css添加阴影
css 左边阴影_css 实现单边内阴影
weixin_39918588的博客
12-23 1305
昨天做一个新网站的，其中有一个效果是单边(上边)内阴影，原以为正常的内阴影效果就可以任意指定哪一边，后来发现不是，这是一个没有解决的问题。因此最后想到了一个 Trick，自己在这里先 Mark 一下。网页的效果是这样子，注意中间大大的蓝色 banner 那里，单单是上方做了一个 40px 的内阴影。具体思路如下：1. 蓝色框固定高度，宽度充满，使用 overflow: hidden；2. 里面放一...
box-shadow 设置单边、多边阴影
weixin_45821809的博客
02-23 2633
box-shadow 设置单边、多边阴影
box-shadow:单边阴影与多边阴影
weixin_56025182的博客
08-04 8036
默认阴影尺寸为0px，可为负数（阴影块默认与盒子同大小，阴影块大小=盒子大小+阴影尺寸），例：阴影尺寸为2px，则四边同时+2px。水平向右移动10px,垂直向下移动10px,显示右边与下边阴影。水平向左移动10px,垂直向上移动10px,显示左边与上边阴影。水平向右移动10px,垂直向下移动10px,显示左边与上边阴影。水平向左移动10px,垂直向上移动10px,显示右边与下边阴影。垂直方向向下移动10px，只显示下边阴影。垂直方向向下移动10px，只显示上边阴影。外部阴影只会在外侧，被遮挡部分不显示；.
【CSS】单边阴影、双边阴影、三边阴影
流萤梦的博客
04-09 3498
实现阴影，先来了解一下box-shadow这个属性。box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。好了，准备工作都做好了，那就直接进入主题吧。
css：box-shadow实现单边，多边阴影
彭世瑜的博客
05-14 5114
文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow 可视化工具 Box-shadow_generator 语法 box-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> .
css实现盒子的双层阴影效果
Tangsze的博客
11-21 1056
<!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-U...
CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
weixin_34318326的博客
03-08 312
　　《CSS3 经典教程系列》的前一篇文章向大家详细介绍了线性渐变（linear-gradient）的用法，今天本文介绍的盒阴影（box-shadow）是目前用得最多的 CSS3 特性之一。盒阴影效果和圆角效果一样都是做成图片，直接编写  CSS 代码就可以实现。 您可能感兴趣的相关文章 Web 开发人员和设计师必读文章推荐 20个非常绚丽的 CSS3 特性应用演示 35个让人...
在盒子内侧伪造两个对边内阴影
行如逆水行舟，不进则退
04-01 392
在盒子内侧伪造两个对边内阴影思路 如图，在盒子内侧伪造两个对边内阴影。 用box-shadow 无法达到只要对边阴影的效果，只能取单边、临边或四个边。 思路 在盒子的前后各造两个伪元素，给这两个伪元素分别定位到盒子两侧，通过背景色线性渐变来达到一个看似阴影的效果。 （注意，父盒子记得加定位） .box { position: relative; } .box::before, .box::after { content: ""; display: block; position: abs
box-shadow单边阴影设置
啊渊的专栏
08-29 5866
第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用高斯模糊滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。spread（阴影范围）可选。.
box-shadow 制作单边阴影效果,不影响其它边的效果
热门推荐
u010289111的专栏
11-15 1万+
以前在使用box-shadow制作单边阴影效果的时候发现或多或少会影响其它边的展示效果. 今天在阅读文章的时候,终于发现了一个解决的方法. 就是利用box-shadow中的一个参数.spread来解决这个问题. 首先我们先要区分 box-shadow:0 10px 10px #ccc; box-shadow:0 10px 10px -10px #ccc; 首先,我们应当认知到这两种书写
【css】box-shadow 单双边阴影
z767327552的专栏
04-09 3815
box shadow 单边阴影 两边阴影 box-shadow语法：x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect，其中阴影半径可以为负值，意思是增加或减少指定数值的阴影半径 正常阴影 box-shadow: 5px 5px 5px black;  阴影半径为负值  box-shadow: 5px 5px 5px -5px black; 阴影半
微信小程序tabBar边框加|上阴影
kxmzl的博客
10-28 2916
微信小程序tabBar边框加|上阴影
深入理解box-shadow的渲染
weixin_47357543的博客
05-09 505
转载自：凌晨的海鸥（简书） 简介 box-shadow这个属性，目的为框盒子添加阴影，使用起来也不是十分复杂。但是最近在开展单位的前端cop项目时，发现此属性不简单，还可以这样用，而且会发现一些看似复杂好玩的东西竟然是用box-shadow实现的。 网上介绍这个属性的大部分文章都是介绍怎么使用，各个属性值怎么设置会有如何的效果之类的，少有深入探讨，感觉读完之后知其然，却不知所以然，无法清晰融会。于是下来好好研究了一下，总结如下。 使用语法： box-shadow: x-shadow y-shadow blu
box-shadow单边阴影
最新发布
09-25
box-shadow单边阴影可以通过设置阴影的偏移量和颜色来实现。可以使用负值来调整阴影的位置，将阴影限制在一个方向上。例如，如果想要创建一个只有右边有阴影的效果，可以将水平阴影的位置设置为正值，垂直阴影的位置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值