css实现3D弹性按钮和box-shadow功能描述

`css.insetBtn{background-color:#fff;box-shadow:inset0px0px0px1px#333333;}`使用内阴影，阴影模糊为0(Noblurring)，展开1px，效果如下：###阴影层次低于文字阴影级别低于文本而不影响文本。通过这个特性可以实现一些特殊效果，例如：使用内阴影实现鼠标移入，当前按钮高亮的提示功能，让用户知道当前选择了哪一个。css.primary{宽度：80px;高度：30px；文本对齐：居中；行高：30px；border-radius:5px;}.primary:hover{box-shadow:inset000200pxrgba(255,255,255,0.2);}box-shadow不能覆盖img元素，因为img的level比box-高阴影。如果想覆盖img元素，可以使用outline边框偏移来解决，如下css.insetImg:hover{outline:200pxsolidrgba(255,255,255,0.2);outline-offset:-200px;}###Shadows可以添加多个阴影，而且没有数量限制，也就是说阴影可以克隆出无数的形状。这种多阴影写法只需要后面继续叠加阴影参数，用逗号(,)分隔css.moreShadow{width:50px;高度：50px；背景色：#80c342；边距：50px；边界半径：50%；box-shadow:0px-40px0px-20px#2d52a4,0px40px0px-20px#7c9bd0,40px0px0px-20px#c7d8f0,-40px0px0px-20px#4d6bb3;}你可以使用多阴影功能来实现加载图标并在其周围画一个圆圈，让它旋转。###阴影实现3D弹力按钮阴影实现3D按钮。当点击按钮时，按钮被按下，松开鼠标按钮回弹。css.button3D{宽度：80px;高度：30px；边框：1px实心#80c342；文本对齐：居中；行高：30px；背景色：#b7d69a；2px0px0px#b7d69a,3px3px0px0px#b7d69a;}/*激活点击事件*/.button3D:active{translate:1px1px;box-shadow:1px1px0px0px#b7d69a,2px2px0px0px#b}7d69三个box-shadow加起来分别是1px，看起来像一个完美连接的3D阴影。通过translate将活动按钮的x轴和y轴平移1px。由于位置移动了，阴影也会移动1px，所以把最外层的阴影缩小3px，好像阴影没有动，但是按钮动了。阴影特点1、内外阴影的光源相同。左上角的光源2.不占地方。阴影不同于边框，边框实际上占据了空间。1px的border就是给盒子增加1px，阴影不会影响盒子的大小。的。3.可以添加多个阴影，每个阴影可以单独设置xy轴偏移、模糊、大小、颜色，相当于一个盒子可以叠加多种颜色效果。案例源码：https://gitee.com/wang_fan_w/css-diary如果觉得本文对你有帮助，欢迎点赞、收藏、转发~box-shadow在实现案例之前，先了解一下shadow属性cssbox-shadow，这个属性可以给盒子设置阴影，它有五个参数，X轴偏移量，Y轴偏移量，模糊半径，扩散半径和颜色。box-shadow文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow假设为一个盒子设置阴影：.shadowBox{width:100px;height:100px;border:1px纯红色；背景颜色：#80c342；框阴影：10px10px10px10px黑色；/**X轴y轴模糊尺寸颜色*/}x轴向左偏移10px，y轴向下偏移10px，模糊10px。放大10px，颜色为黑色，效果如下：上面是设置外阴影，内阴影只需要在属性box-shadow前加上inset：inset10px10px10px10pxblack；如果不指定inset，默认阴影在边框外，即阴影向外展开。使用inset关键字会使阴影落入框内，使其看起来像是内容被向下推。此时阴影将位于边框内（即使是透明边框）、背景上方和内容下方。内阴影和外阴影的用法是一样的，这里讲解阴影的基本用法。接下来我们来看看阴影的其他应用：不占空间的阴影不同于边框。边框实际上占据了空间。1px的边框给框增加1px，阴影不会影响框的大小。用过ui框架的朋友都知道，这些框架一般都会提供几种按钮样式，大致分为红色、蓝色、黄色、白色。不同的按钮颜色有不同的应用效果。有一个特殊的白色按钮，它的边框是黑色的，大小和其他按钮一样。显然，边框会影响框的实际大小，但它的按钮大小与其他按钮相同。在这里，它可以用阴影来实现。通过改变阴影的模糊效果，使阴影变成边缘。这会产生边框效果。Normal