盒子阴影(box-shadow)和文字阴影text-shadow

一条程序○

2024-03-24 帮助1人

一、盒子阴影：

书写语法：box-shadow: inset h-shadow v-shadow blur-radius color;
inset 阴影类型为内阴影
outset 阴影类型为外阴影（不添加时默认为外阴影，但是添加后反而会使得阴影无效，所以如果要想实现外阴影可以不加）
h-shadow----- 阴影的水平位移量允许为负值
v-shadow----- 阴影垂直位移量允许为负值
blur-radius-----阴影模糊半径即阴影向外模糊的模糊范围值越大越模糊
color----- 阴影颜色，定义绘制阴影时所使用的颜色

例如：（配合hover效果实现）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #007aff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.wrap{
position: relative;
width: 300px;
height: 400px;
border-radius: 40px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5) inset,-5px -5px 15px rgba(255, 255, 255, 0.5) inset,5px 5px 15px rgba(0, 0, 0, 0.5) inset,5px 5px 15px rgba(0, 0, 0, 0.5) inset;
}
.wrap::after{
display: block;
content: "";
clear: both;
position: absolute;
background-color: white;
border-radius: 35px;
inset: 5px;
transition: 1s;
}
.wrap:hover::after{
cursor: pointer;
transform: translate(40px,-40px);
box-shadow: -30px 30px 50px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>

实现效果：

盒子阴影 hover效果

二、文字阴影：

书写语法：text-shadow: h-shadow v-shadow blur color;
h-shadow -----

水平阴影的位置，允许负值
v-shadow -----垂直阴影的位置，允许负值
blur-----模糊的距离（如果设置的是0，那么将和正常的文字清晰度一样）
color------阴影的颜色

例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
font-size: 100px;
text-align: center;
background-color: #007aff;
}
.wrap::after{
display: block;
content: "哒哒哒";
clear: both;
color: white;
text-shadow:
0px -1px 0px #c0c0c0,
0px -2px 0px #b0b0b0,
0px -3px 0px #a0a0a0,
0px -4px 0px #909090,
0px -5px 0px #c0c0c0,
0px -6px 0px #b0b0b0,
0px -7px 0px #a0a0a0,
0px -8px 0px #909090,
0px -9px 10px rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>

实现的效果为：

学新通

这篇好文章是转载于：学新通技术网

盒子阴影(box-shadow)和文字阴影text-shadow

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

微信公众号没有声音提示怎么办

photoshop扩展功能面板显示灰色怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

photoshop蒙版画笔没反应怎么办