张家港网站设计建设,广州网络推广有限责任公司,ftp 上传 wordpress,珠海网站开发排名前言#xff1a;最近又叕看到了一个好看的特效#xff0c;随后整理了一下#xff0c;发现实现起来主要靠一个css属性就实现了#xff0c;有一次刷新了我对css强大的认知#x1f60e;#xff0c;这个属性就是box-shadow#xff0c;平常我们用到的比较少#xff0c;但是针… 前言最近又叕看到了一个好看的特效随后整理了一下发现实现起来主要靠一个css属性就实现了有一次刷新了我对css强大的认知这个属性就是box-shadow平常我们用到的比较少但是针对于C端可能使用就多了但是你们真正掌握了它的使用吗让我这一文带你深度了解box-shadow 文章目录
box-shadow属性介绍及用法
基本使用
高级使用
五个值
inset六个值
多个阴影
关键字
加个动画 box-shadow属性介绍及用法 box-shadow可以为元素的框架添加阴影效果这个属性可以设置多个阴影效果每个阴影效果之间用逗号分隔。box-shadow属性可以设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色 基本使用
平常使用我们都是box-shadow第一个值 第二个值 第三个值 第四个值每个值后面用空格隔开 第一个值阴影往X轴的偏移距离第二个值阴影往Y轴偏移的距离第三个值阴影模糊的半径值越大阴影越模糊第四个值阴影的颜色可以使用十六进制也可以使用rgba()写法 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style
// box盒子阴影X轴便宜10像素Y轴偏移10像素模糊半径为20像素颜色为#ccc
.box{margin: 100px auto;width: 200px;height: 200px;border-radius: 50%;border: none;background-color: rgb(151, 211, 151);box-shadow: 10px 10px 20px #ccc;
}/style
bodydiv classbox/div/body
/html 高级使用
五个值 box-shadow其实有五个值如果有五个值的情况那第四个值就不再是颜色了而第五个值是颜色第四个值表示的是阴影的半径大小值越大阴影越大 style
.box{width: 200px;height: 200px;border-radius: 50%;border: none;background-color: rgb(77, 255, 0);box-shadow: 10px 10px 20px 30px #ccc;
}/style inset六个值 当使用了inset的时候变成了六个值阴影将不再是对外扩散相反是网内出现内阴影而且第五个值五个值时的第四个值数值越大阴影往内扩散越大直到铺满盒子数值在变大阴影也不会出现变化了 多个阴影
除了可以控制内阴影还是外阴影以外还可以使用 来进行间隔实现多个阴影效果
style
.box{margin:100px auto;width: 200px;height: 200px;border-radius: 50%;border: none;background-color: aqua;box-shadow: 0 0 20px #fff,20px 0 80px #f0f,-20px 0 80px #0ff,inset 0 0 50px #fff,inset 200px 0 80px #f0f;
}/style 一个好看的小球这不就出来了
关键字
而且box-shadow还有几个特殊的关键字 inherit将CSS属性的值设置为其父元素的值。initial将CSS属性的值重置为其默认值。revert将CSS属性的值重置为其父元素的值如果该属性是继承属性或者重置为其默认值如果该属性不是继承属性。revert-layer将CSS属性的值重置为其父元素的值如果该属性是继承属性或者重置为其默认值如果该属性不是继承属性。与revert相比它还会重置元素上所有层叠上下文中该属性的值。unset将CSS属性的值设置为其父元素的值如果该属性是继承属性或者重置为其默认值如果该属性不是继承属性。 具体解释意思就是 box-shadow: inherit;会将元素的box-shadow设置为其父元素的box-shadowbox-shadow: initial;会将元素的box-shadow设置为其默认值box-shadow: revert;会将元素的box-shadow设置为其父元素的box-shadow如果该属性是继承属性或者重置为其默认值如果该属性不是继承属性box-shadow: revert-layer;会将元素上所有层叠上下文中box-shadow的值重置为其父元素的box-shadow如果该属性是继承属性或者重置为其默认值如果该属性不是继承属性box-shadow: unset;会将元素的box-shadow设置为其父元素的box-shadow如果该属性是继承属性或者重置为其默认值如果该属性不是继承属性 加个动画
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylebody{margin: 0;padding: 0;box-sizing: border-box;background-color: #000;
}
.box{margin: 100px auto 0;width: 200px;height: 200px;border-radius: 50%;border: none;animation: redBall 6s linear infinite;background-color: rgb(0, 13, 255);box-shadow: 0 0 20px #fff,20px 0 80px rgb(0, 255, 191),-20px 0 80px rgb(0, 255, 81),inset 0 0 50px #fff,inset 200px 0 80px rgb(255, 234, 0);
}
keyframes redBall{0%{box-shadow: 0 0 20px #fff,20px 0 80px rgb(0, 255, 213),-20px 0 80px rgb(72, 255, 0),inset 0 0 50px #fff,inset -200px 0 80px rgb(0, 64, 255);}50%{box-shadow: 0 0 20px #fff,20px 0 80px rgb(0, 242, 255),-20px 0 80px rgb(17, 255, 0),inset 0 0 50px #fff,inset 0px 0 80px rgb(255, 0, 55);}100%{box-shadow: 0 0 20px #fff,20px 0 80px rgb(179, 255, 0),-20px 0 80px #0ff,inset 0 0 50px #fff,inset 200px 0 80px rgb(255, 0, 21),inset 10px 0 80px #0ff;}
}
/style
bodydiv classbox/div
/body
/html
实现动态效果 (先录屏然后制作的gif图会比较模糊大家将就看吧) 总结以上就是我对box-shadow属性的所有总结希望对伙伴们有所帮助学会一个算一个喜欢的同学们可以一键三连希望与大家共同分享共同进步当然有什么问题也欢迎大家及时指正 个人简介某大型国企高级前端开发工程师7年研发经验信息系统项目管理师、CSDN优质创作者、阿里云专家博主华为云云享专家分享前端后端相关技术与工作常见问题~ 作 者码喽的自我修养❣️ 专 栏 HTML5与CSS3 若有帮助还请 关注➕点赞➕收藏 不行的话我再努努力 更多专栏订阅推荐 前端工程搭建 vue从基础到起飞 ✈️ JavaScript深入研究 ⭐️ uniapp与微信小程序 前端工作常见问题汇总 ✍️ GIS地图与大数据可视化
