css下边框阴影效果-CSS：使用box-shadow属性实现按钮的浮动效果

bendan520 css

2023-08-29 0 5,316 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

使用box-shadow属性实现浮动按钮的效果

最近，我正在写毕业设计的头版。上面有班级展示牌和教练展示牌。一开始我只是简单的设置了键盘悬停时改变文字颜色的效果。凸起的3D效果非常快。我很快就百度编程css下边框阴影效果，找到了最简单的实现方法，就是通过CSS的box-shadow属性来控制。

我们来看看大厂网站的效果

是中级感吗？让我们用 CSS 来实现它。首先我们来了解一下box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离（模糊半径）
spread	可选。阴影的大小（扩展距离）
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

我们可以通过设置h-shadow和v-shadow来控制包阴影出现的位置；

h-shadow：阴影的水平倾斜量css下边框阴影效果，其值可以是正数或负数。如果值为正，则阴影在对象的左侧，当值为负时，阴影在对象的右侧；

v-shadow：阴影的垂直偏转量，其值也可以为正值或负值。如果值为正，则阴影位于对象的顶部；如果值为负，则阴影位于对象的底部；

我们可以通过设置blur和spread来控制包阴影的模糊和距离；

阴影模糊直径：该参数是可选的，但其值只能是正值。如果值为0，则表示阴影没有模糊效果。值越大，阴影边缘越模糊；

阴影扩展直径：该参数是可选的，其值可以是正值或负值。如果值为正，则整个阴影将被延长，否则，如果值为负，则将缩小；

我们可以通过设置color和inset来控制bag阴影的颜色和位置；

阴影颜色：此参数是可选的。如果不设置颜色，浏览器会采取默认颜色，但是各个浏览器的默认截图不一致，特别是在webkit内核下的safari和chrome浏览器中，出现透明颜色；

阴影类型：此参数是可选的。如果不设置值，默认投影方式为外阴影；如果选择其唯一值“inset”，则其投影为内阴影；

这样我们就可以随心所欲地设置键盘结束时的疗效了~

.class-show ul li:hover {
    position: relative;
    top: -3px;
    left: 0;
    box-shadow: 0px 5px 5px #c8c8c8;
}

.coachshow ul li:hover {
    position: relative;
    top: -3px;
    left: 0;
    box-shadow: 0px 0px 5px #c8c8c8, /*上边阴影  红色*/
    -5px 0px 5px #c8c8c8, /*左边阴影  绿色*/
    5px 0px 5px #c8c8c8, /*右边阴影  蓝色*/
    0px 0px 5px #c8c8c8;
    border-radius: 15px;
}