css零到一高级教程008：CSS Box Shadow

最新推荐文章于 2024-09-21 23:59:03 发布

慕容屠苏

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量198

点赞数

分类专栏： css零到一文章标签： css html 前端

本文链接：https://blog.csdn.net/kerryqpw/article/details/123756638

版权

css零到一专栏收录该内容

98 篇文章 2 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了CSS的box-shadow属性，包括如何设置水平和垂直阴影、添加颜色、模糊效果，以及如何利用它创建卡片效果。通过实例展示了如何创建具有阴影的纸质卡片和图像卡片，同时概述了CSS的其他阴影属性。

摘要由CSDN通过智能技术生成

CSS box-shadow 属性

CSS box-shadow 属性应用阴影于元素。

最简单的用法是只指定水平阴影和垂直阴影：

实例

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>box-shadow 属性</h1>

<div>已设置 box-shadow 的 div 元素</div>

</body>
</html>