box-shadow实现轻拟物风格按钮
发布日期:2021-05-20 10:06:47
浏览次数:24
分类:技术文章
本文共 1300 字,大约阅读时间需要 4 分钟。
1、效果预设
2、HTML
管理员权限
CSS
width: 120px; height: 32px; display: inline-block; text-align: center; position: relative; background-color: #f0f8ff; color: #0095f8; border-radius: 3px; font-weight: 700; line-height: 33px; box-shadow: 0px 2px 4px rgb(160, 217, 253);
3、也就是给css设置box-shadow属性
;
box-shadow: 0px 2px 4px rgb(160, 217, 253);
- 数值依次对应的是:
- 水平阴影的位置。允许负值。
- 垂直阴影的位置。允许负值。
- 阴影的尺寸。
- 阴影的颜色
4、可参考css自定义属性的写法
:
html { /* 定义变量 */ --bgColor: #ff5353; /* rgba的四个值分别为:红(R)、绿(G)、蓝(B)、透明度(A) */ --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5); --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);}/* 设置一些页面的布局样式 */body { display: flex; margin: 0; padding: 0; width: 100vw; height: 100vh; justify-content: center; align-items: center; background-color: var(--bgColor);}.card { width: 30vh; height: 30vh; margin: 45px; background-color: var(--bgColor); border-radius: 30px;}/* 主要部分 */.left { /* 设置外阴影 */ box-shadow: var(--blackShadow), var(--whiteShadow);}.right { /* 设置内阴影 */ box-shadow: inset var(--blackShadow), inset var(--whiteShadow);}
转载地址:https://blog.csdn.net/weixin_45416217/article/details/108533871 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年03月02日 14时05分53秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
linux优化deepin启动速度,如何让deepin启动更快?
2019-04-21
c语言读取多个连续的文件,C语言---多个线程读取文件
2019-04-21
图片轮播c语言,IOS开发之UIScrollView实现图片轮播器的无限滚动
2019-04-21
c语言中操作数右移一位,Assembly C中的按位运算
2019-04-21
html中的em的使用方法,css布局的em的使用方法
2019-04-21
html画笛卡尔爱心,UG/NX 绘制一个爱心模型,你有几种方法能做出来呢?
2019-04-21
centos7重新加载服务的命令_squid代理服务器命中率的提高方法之一
2019-04-21
aps是什么意思_一文看懂ERP、APS和MES
2019-04-21
苹果地图副总裁_苹果发布 iOS 13 预览版,带来这些全新功能
2019-04-21
bert中的sep_在属性级情感分析中结合BERT和语法信息
2019-04-21
qlineedit文本改变时_word排版技巧:如何调整文本和页面的纵横显示
2019-04-21
李宏毅svm_李宏毅-深度学习
2019-04-21
php向mysql上传文件_PHP面向对象封装MySQL操作函数、文件上传
2019-04-21
asme标准最新版本_ASME的螺柱用什么标准
2019-04-21
jmeter录制手机客户端_米亚圆桌录制和回放观看功能全新上线
2019-04-21
hdfs orc格式_处理 HDFS 上的过多小文件的问题?
2019-04-21
缺失magisk正常工作所需的文件_总结了十个工作表看上去很凌乱的原因
2019-04-21
matlab将二值图像与原图重叠_MATLAB--数字图像处理 图像直方图规定化
2019-04-21