css实现图片曲线阴影_css 曲线阴影

作者：花生_TL007 | 2024-03-18 23:25:45

踩

css 曲线阴影

css阴影：

box-shadow 属性用于向框添加一个或多个阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

例如：

box-shadow: 10px 20px 8px rgba(0,0,0,0.3);
/*默认时外部阴影，10px相当于box左端右偏10px，20px相当于box上端下偏20px，8px是模糊距离，
rgba前三个值是颜色，最后一个值是透明度（若不需要透明度则直接写rgb即可）*/
1
2
3

当添加多个阴影时用逗号隔开，可以同时添加内部阴影（后边跟个inset）和外部阴影。
例如：

box-shadow: 0px 1px 4px rgba(0,0,0,0.3),20px 40px 10px rgba(255,0,0,0.1) inset;
/*内部阴影20px是距离左端20px，显示在box上，当h-shadow和v-shadow同时为0时，box四边都有内部阴影*/
1
2

曲线阴影浏览器实现效果：

在这里插入图片描述

曲线阴影实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>photo shadow</title>
	<style type="text/css">
		body{
			font-family: Arial;
			font-size: 20px;
		}
		body,ul{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.wrap{
			width: 70%;
			height: 200px;
			margin: 50px auto;
			background: #fff;
		}
		.wrap h1{
			font-size: 40px;
			text-align: center;
			line-height: 200px;
		}
		.effect{
			box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
			position: relative;
		}
		.effect:after,.effect:before{
			content: '';
			z-index: -1;
			position: absolute;
			top: 50%;
			bottom: 0;
			left: 10px;
			right: 10px;
			box-shadow: 0 0 20px rgba(0,0,0,0.8);
			border-radius: 100px/10px;
		}
	</style>
</head>
<body>
	<div class="wrap effect">
			<h1>曲线阴影</h1>
		</div>	
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/266135