盒子阴影(box-shadow)和文字阴影text-shadow
一、盒子阴影:
书写语法:box-shadow: inset h-shadow v-shadow blur-radius color;
inset 阴影类型为内阴影
outset 阴影类型为外阴影 (不添加时默认为外阴影,但是添加后反而会使得阴影无效,所以如果要想实现外阴影可以不加)
h-shadow----- 阴影的水平位移量 允许为负值
v-shadow----- 阴影垂直位移量 允许为负值
blur-radius-----阴影模糊半径 即阴影向外模糊的模糊范围 值越大越模糊
color----- 阴影颜色,定义绘制阴影时所使用的颜色
例如:(配合hover效果实现)
-
-
<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------阴影的颜色
例如:
-
-
<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>
实现的效果为:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfiaebg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24