CSS样式之box-shadow阴影

最新推荐文章于 2024-07-26 08:45:03 发布

weixin_41544553小彩虹

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量913

点赞数 1

分类专栏： HTML&CSS 文章标签： css基础样式 border-shadow 阴影

本文链接：https://blog.csdn.net/weixin_41544553/article/details/86529962

版权

本文探讨了CSS中的box-shadow属性，从基本的阴影效果到创建炫酷的卷边阴影，通过实例展示了如何使用该属性为元素添加不同类型的阴影效果。

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

box-shadow

CSS中的阴影样式，从简单到炫酷

1、介绍box-shadow

案例1：

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>给边框设置阴影</title>
		<style>
			body{
				/*为了满足老夫的少女心,先来个粉红色背景*/
				background: pink;
			}
			div{
				width: 100px;
				height: 100px;
				margin: 200px;
				border: 1px solid #fff;
				/*给所有的div来个统一的样式,100*100的小白框框*/
			}
			/*分开看每个div的效果*/
			
			.div1{
				/*前面两位为阴影的x和y,x控制水平方向(为正值时阴影在右边,负值则在左边),
				y控制垂直方向(为正值时阴影在下边,负值则在上边)*/
				/*给div1设置右边和下边的阴影*/
				/*box-shadow:x y color;*/
				box-shadow: 10px 10px  #fff;
			}
			.div2{
				/*给div2设置左边和上边的阴影*/
				box-shadow: -10px -10px #fff;
			}
			.div3{
				/*box-shadow:x y blur color;*/				
				/*box-shadow的第三位数为设置阴影的