盒子阴影box-shadow

最新推荐文章于 2024-07-10 16:12:49 发布

Blank0411

最新推荐文章于 2024-07-10 16:12:49 发布

阅读量65

点赞数

分类专栏： CSS3新特性文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_49342009/article/details/109327677

版权

CSS3新特性专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow:必须。水平阴影的位置，允许负值
v-shadow:必须。垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选，阴影颜色
inset 可选，将外部阴影（outset）改为内部阴影

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body{
			background-color: #e9e9e9;
		}
		.ceng{
			float: left;
			width: 500px;
			height: 500px;
			box-shadow: 2px 2px 3px #aaa;
			padding: 10px 10px 20px 10px;
			background-color: white;
		}
		.rotate_left{
			transform: rotate(7deg);
		}
		.rotate_right{
			transform: rotate(-7deg);
		}
		
	</style>
</head>
<body>
	<div class="ceng rotate_left">
		<img src="./1.jpg">
		<p>故宫1</p>
	</div>
	<div class="ceng rotate_right">
		<img src="./2.jpg">
		<p>故宫2</p>
	</div>
</body>
</html>

Blank0411

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子阴影box-shadow

box-shadow:h-shadow v-shadow blur spread color inseth-shadow:必须。水平阴影的位置，允许负值v-shadow:必须。垂直阴影的位置，允许负值blur 可选，模糊距离spread 可选，阴影的尺寸color 可选，阴影颜色inset 可选，将外部阴影（outset）改为内部阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF.
复制链接

扫一扫