- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈程序员必看
box-shadow(盒子阴影)
box-shadow 属性可以设置一个或多个下拉阴影的框 可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 语法： box-shadow: h-shadow v-shadow blur spread color inset; div.box{ /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); } 值 描述 h-shadow 必需的。 } .box3{ box-shadow: -10px 10px blue; } .box4{ box-shadow : -10px 10px -5px blue; } .box4{ /* blur值越大越模糊 */ box-shadow:
1.3K30编辑于 2022-09-06 - 来自专栏用户7873631的专栏
移动端的box-shadow
200px; position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;border: 1px solid black; box-shadow height: 200px; position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;background: black; box-shadow :0px 20px 0px 0px #ccc; transition:0.3s; } div:active{ transform:translateY(20px); box-shadow:0px 200px; position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;border: 1px solid black; box-shadow : 200px; position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;border: 1px solid black; box-shadow
81210发布于 2020-10-28 - 来自专栏用户7873631的专栏
详解：28 box-shadow开端
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-shadow</title> <link rel=" : 0 10px pink; } .box2{ <em>box-shadow</em>: 0 -10px pink; } .box3{ <em>box-shadow</em>: 10px 0 pink; } .box4{ <em>box-shadow</em>: -10px 0 pink; } .box5{ <em>box-shadow</em>:10px 10px rgba(0,0,0,.5); } .box6 { <em>box-shadow</em>: -10px -10px rgba(0,0,0,.5); } .box7{ <em>box-shadow</em>:-10px -10px 5px rgba(0,0,0,.5 ); /* /*低则透明，高则不透明*/*/ } .box8{ <em>box-shadow</em>:7px 7px 10px 5px rgba(50, 50, 50, 0.75); /*/
46110发布于 2020-10-28 - 来自专栏smh的技术文章
css中的box-shadow详解
相信大家对于box-shadow这个属性都应该很清楚，那就是给元素添加阴影的，今天我们就来详细的说一下这个属性。 从外层的阴影（开始时）改变阴影内侧阴影 box-shadow最少为两个参数：即h-shadow和v-shadow，大家可以理解为x和y轴的概念。 向元素添加单个 box-shadow 效果时使用以下规则： 当给出两个、三个或四个 <length>值时。 ,如下： img{box-shadow:-10px,-10px} image.png blur参数 此参数用来设置模糊距离，不能为负数。 div{box-shadow:0px 0px 20px 10px green;} image.png 2.一个元素可应用多个阴影效果。
1.7K50发布于 2020-07-23 - 来自专栏bug收集
Box-shadow的应用技巧分享
代码如下： box-shadow: 0 20px 20px #000000; 效果如下图： x轴方向还是阴影，怎么办呢？ 可以为负值， 模糊值设置，让盒子扩展了20px , 可以将外延值，设置为负，让水平方向阴影取消 代码如下： box-shadow: 0 20px 20px -20px #000000; 效果如下图： 有了这个参数后，我们也可以使用“box-shadow”像photoshop 中的阴影工作一样，制作单边阴影效果： .box1 { box-shadow: -5px 0 5px green, / 0 -5px 5px blue, /*顶部阴影*/ 0 5px 5px red, /*底部阴影*/ 5px 0 5px yellow; /*右边阴影*/ } .box2 { box-shadow 上面通过一个实例展示了“box-shadow"中扩展半径的作用和使用，如果你感兴趣的话可以尝试做做下面的效果： 上面的代码来自于：conceptboard.github.com
59820编辑于 2022-07-22 - 来自专栏编程微刊
CSS3 box-shadow 属性
关于css相关的属性，看似很简单，实际上却蕴含着巨大的潜力，细心组合，学好css之后，能够呈现出一些特别好看的界面哦，尤其像今天所说的CSS3 box-shadow 属性一样，只需改一点点代码，就能呈现出不同的效果 charset="utf-8"> <title>test</title> <style> .test1 { box-shadow ; margin: 30px 670px; } .test2 { box-shadow ; margin: 30px 670px; } .test3 { box-shadow 30px 670px; } .test4 { /*上下左右阴影*/ box-shadow
19700编辑于 2025-05-18 - 来自专栏编程微刊
CSS3 box-shadow 属性
关于css相关的属性，看似很简单，实际上却蕴含着巨大的潜力，细心组合，学好css之后，能够呈现出一些特别好看的界面哦，尤其像今天所说的CSS3 box-shadow 属性一样，只需改一点点代码，就能呈现出不同的效果 charset="utf-8"> <title>test</title> <style> .test1 { box-shadow ; margin: 30px 670px; } .test2 { box-shadow ; margin: 30px 670px; } .test3 { box-shadow 30px 670px; } .test4 { /*上下左右阴影*/ box-shadow
61141发布于 2019-08-02 - 来自专栏森屿暖树
CSS边框阴影:box-shadow属性
CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。 你可以在任何元素上使用 box-shadow来添加阴影效果。如果元素同时设置了 border-radius属性 ，那么阴影也会有圆角效果。 语法： /* x偏移量 | y偏移量 | 阴影颜色 */ box-shadow: 60px -16px teal; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */ box-shadow / box-shadow: 3px 3px red, -1em 0 0.4em olive; /* 全局关键字 */ box-shadow: inherit; box-shadow: initial; box-shadow: unset;
1.1K20编辑于 2022-03-23 - 来自专栏技术分享交流
CSS 04 盒子阴影效果box-shadow
box-shadow: h-shadow v-shadow blur spread color inset h-shadow 必须。水平阴影半径的位置，允许负值 v-shadow 必须。 .ceng{ width:294px; padding:10px 10px 20px 10px; border:1px solid #BFBFBF; background-color:white; box-shadow
77020编辑于 2023-02-13 - 来自专栏smh的技术文章
css中的box-shadow属性详解
相信大家对于box-shadow这个属性都应该很清楚，那就是给元素添加阴影的，今天我们就来详细的说一下这个属性。 向元素添加单个 box-shadow 效果时使用以下规则： 当给出两个、三个或四个 <length>值时。 属性实例讲解 img{box-shadow:10px 10px} ? img{box-shadow:-10px,-10px} blur参数 此参数用来设置模糊距离，不能为负数。 ? div{box-shadow:0px 0px 20px 10px green;} ? 2.一个元素可应用多个阴影效果。 ?
1.7K30发布于 2020-07-27 - 来自专栏HTML5学堂
CSS3盒阴影 box-shadow
HTML5学堂：CSS3 的 box-shadow 有点类似于 text-shadow，只不过不同的是 text-shadow 是对象的文本设置阴影，在移动端我可以使用盒阴影来代替边框的效果，而 box-shadow 而本章主要讲的是盒阴影 (box-shadow)，盒阴影与文本阴影一样，都可以代替具有阴影效果的图片，减少对服务器的请求压力！ 而使用方面来说，CSS3 的 box-shadow 有点类似于 text-shadow，只不过不同的是 text-shadow 是对象的文本设置阴影，而 box-shadow 是给对象实现图层阴影效果。 盒阴影 box-shadow基本语法： box-shadow：none|shadow[,shadow]* shadow=length{2,4}&&color? 代码如下： .h5course:active { top: 3px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785
2.7K60发布于 2018-03-12 - 来自专栏web秀
Box-Shadow Loading，可以创造无限可能
Box-Shadow 通常，我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能，"多层阴影"，制作一些非常有趣的动画。 box-shadow: h-shadow v-shadow blur spread color inset; 属性值描述 h-shadow 指阴影水平偏移量，其值可正可负，正值，则阴影在对象的右边， width: 1em; height: 1em; border-radius: 50%; position: relative; border: 1px solid #3eaf7c; box-shadow @keyframes aniLoad1 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #3eaf7c, 1.8em 小结 本小结知识: 1、Box-Shadow 属性值，坐标系看图二 2、Box-Shadow 多阴影 用 逗号 分割 3、animation 动画（仅执行一次：forwards，永久执行 infinite
66710发布于 2020-02-13 - 来自专栏前端进阶实战
从box-shadow属性望见前端未来
box-shadow应该算是比较常用的属性，用于给元素增加内外阴影，以凸显元素在视觉上的层次/立体感。 MDN》 从MDN对于box-shadow的描述，则认为通常的 box-shadow属性有，阴影效果在X&Y轴的偏移量，其次是模糊度半径、扩散度半径和阴影颜色。 因此，自然会想到借助CSS中的box-shadow来作为主要实现拟物style的属性。 类比上图中的虚拟键盘，同理可以实现一个轻拟物风格的图标导航。 实现一个轻拟物风格的图标导航 2.3 实例：一个轻拟物风格的导航 单看box-shadow的语法还是比较简单的，为了快速上手，我们最好还是得实际操练一番。 国外的小哥搞了一个在线轻拟物风格box-shadow属性调参的网站 —— Neumorphism - https://neumorphism.io/#ffffff Neumorphism 四、总结 box-shadow
1.1K31编辑于 2022-07-29 - 来自专栏web秀
CSS3 box-shadow实现背景动画
前言 语法： box-shadow: h-shadow v-shadow blur spread color inset; box-shadow，向框添加一个或多个阴影。 ""; position: absolute; width: 50px; height: 50px; top: -50px; left: -50px; box-shadow 这里box-shadow，第一行添加3个阴影，分别用不同颜色区分，和效果图一比较你应该就懂了，用3x5个阴影块，完成250px的正方形。 50% { transform: translate(0px); color: brown; border-radius: 0; box-shadow 75% { transform: translate(0px); color: teal; border-radius: 50%; box-shadow
1.3K20发布于 2019-09-04 - 来自专栏杰的记事本
filter:drop-shadow与box-shadow的区别
一、兼容性不一 CSS3 box-shadow从IE9浏览器开始就支持了，兼容性如下截图： ? 但是，如果使用同样参数值的box-shadow，例如： box-shadow: 5px 5px 10px black; 会发现，box-shadow的阴影距离更小，色值要更深： ? 三、drop-shadow没有内阴影效果 box-shadow支持inset内阴影，如： box-shadow: inset 5px 5px 10px black; 但是，drop-shadow却没有。 四、drop-shadow不能阴影叠加 box-shadow有个超屌的特性，就是阴影可以任意累加，因此，理论上我们可以使用box-shadow生成任意的图片 但是filter中的drop-shadow就只能抱歉了 那就是，drop-shadow才是真正意义上的投影，而box-shadow只是盒阴影而已。 什么意思呢？
2K10发布于 2019-09-04 - 来自专栏忽如寄的前端周刊
IOS下box-shadow的诡异bug的修复
于是灵光一现使用box-shadow来做，因为box-shadow的第四个值就是阴影的拓展尺寸，我把这个设置为非常大，这样就很适合作为黑色的蒙层部分，想想都感觉自己是如此的机智。 box-shadow: 0 0 0 9999999px rgba(0,0,0,.8) ? 于是我不断尝试修改box-shadow的尺寸10px 、100px 、1000px、10000px、2000px..... 当尺寸小于等于这个值的时候是显示正常的，大于这个值是不能显示box-shadow的，如下： ? ? 在这个时候，我扶了扶我想象中的眼镜，真相只有一个 ? 我尝试修改其中一个的圆角值，如下： box-shadow: 0px 0px 0px 2039px #000; border-radius: 6px 6px 6px 90px; 显示正常 box-shadow
1.5K50发布于 2019-07-24 - 来自专栏站长的编程笔记
【说站】css中box-shadow方法如何使用
css中box-shadow方法如何使用 说明 1、box-shadow支持逗号分隔语法，可以创建任意数量的投影。 当一个正值的扩展半径加上两个零偏差和零模糊值时，得到的投影就像一个实线框。 如果想投影，也可以响应事件，可以设置内阴影，即box-shadow属性和inset关键词产生内阴影，此时需要增加额外的内边距来放置内阴影。 实例 background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6); 以上就是css中box-shadow方法的使用，希望对大家有所帮助。
87730编辑于 2022-11-23 - 来自专栏地方网络工作室的专栏
巧用box-shadow实现布局区域间隔变色
巧用box-shadow实现布局区域间隔变色 前言 之前给客户做了一个网站,整体是1200px宽.因此,网页整体是放在一个 1200px的盒子里的.但是今天,客户突然要求实现这样的变色效果,一个区域是灰色的 html结构,必须在所有需要变色的板块外面加上一个100%宽的盒子 好了,综合分析,背景图片貌似不能完美解决我的问题.没关系,我CSS很强大.猛然间我想到了一个牛逼的CSS属性box-shadow. box-shadow 我的解决方案就是,利用box-shadow属性,向左和向右分别加上相当于自身宽度的灰色投影,并且给自己加上灰色背景,这样就实现了整体的变色.代码如下: .home {width: 1200px;margin : 0 auto;} .floor { padding: 20px 0;height: 500px;width: 1200px; box-shadow: 1200px 但是,我们是讲求完美的么.哪怕是百万份之一的人会这样做,也不能露怯呀.但是,我们的box-shadow是万能的呀…我们再来改一下代码: .home {width: 1200px;margin: 0 auto
75510编辑于 2022-05-05 - 来自专栏用户7873631的专栏
详解：29 进进出出案例（box-shadow）
主要设置在效果目标体中哈， .btn-left:hover：触碰了这个 记住了哈 box-shadow：x y 模糊值 大小哈，不是上右下左哈，我刚才差点就信了哈哈哈 <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-shadow</title> <link rel=" :300px 0 rgba(0,0,0,.5) inset; } .btn-right:hover{ <em>box-shadow</em>:-300px 0 rgba(0,0,0,.5) inset; :hover{ <em>box-shadow</em>: 0 0 0 10px yellow inset,0 0 0 150px rgba(0,0,0,.5) inset; /*这种重合的是那一个先执行？ 是一起执行的话，我也是看很多遍才看懂的哈 */ } .left-right:hover{ <em>box-shadow</em>: 100px 0 rgba(0,0,0,.2) inset,-100px
39320发布于 2020-10-28 - 来自专栏偏前端工程师的驿站
CSS魔法堂：Box-Shadow没那么简单啦:)
前言 说起box-shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box-shadow的那些事。 shadow pattern，默认为outset，即采用outer box-shadow。通过设置为inset时，则采用inner box-shadow。 outer box-shadow 和 inner box-shadow怎么玩？ 默认情况下采用的是outer box-shadow，当在box-shadow中添加inset关键词后，则采用inner box-shadow了，但到底它俩的效果是如何的呢？ 被割裂的box-shadow 当设置box-shadow的盒子被拆分为多个盒子时，其对应的box-shadow又会如何呢？
1.5K100发布于 2018-01-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号