【小白学前端】化腐朽为神奇-CSS实现书皮带阴影效果（day01-1）

长安紫薯

于 2021-04-30 17:09:02 发布

阅读量315

点赞数 1

CC 4.0 BY-SA版权

分类专栏： front-end 大前端文章标签： html css3

本文链接：https://blog.youkuaiyun.com/nutony/article/details/116306605

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆角带阴影效果的书皮</title>
		<style>
			.book{
   
   
				margin: 20px;	/* 外层空20像素 */
				padding: 10px; /* 内层空10像素 */
				color: white;	/* 字体颜色白色 */
				width: 200px;	/* 宽度200像素 */
				height: 280px;	/* 高度280像素 */
				background-color: red;	/* 背景色红色 */
				border-radius: 10px 19px 19px 10px;	/* 圆角 */
				box-shadow: 5px 5px 5px #888888;	/* 阴影 */
				float: left;	/* 居左排列 */
			}
			.book-green{
   
   
				background-color: green;	/* 背景色 */