H5基础——(5)怪异盒模型、弹性盒模型、倒影及阴影

最新推荐文章于 2024-07-08 12:11:04 发布

置顶 Erosvan

最新推荐文章于 2024-07-08 12:11:04 发布

阅读量3.9k

点赞数

文章标签：怪异盒模型弹性盒模型倒影阴影 Web前端

本文链接：https://blog.csdn.net/Erosvan/article/details/52648210

版权

一、怪异盒模型

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>怪异盒模型</title>
		<style type="text/css">
			.reddiv {
				width: 200px;
				height: 200px;
				background-color: red;
				box-sizing: border-box;
				border: 20px blue solid;
				padding-left: 50px;
				/*怪异盒模型  
				 * box-sizing: border-box
					和标准盒模型不一样的地方在于 padding 和 border 不会让整体宽度增加
				*/
			}
		</style>
	</head>
	<body>
		<div class="reddiv">1</div>
	</body>
</html>

二、弹性盒模型

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>弹性盒模型</title>
		<style type="text/css">
			.bigdiv {
				width: 600px;
				height: 400px;
				border: blue 5px solid;
				/*
					可以通过 display: -webkit-box 设置一个容器为弹性盒模型。弹性盒模型里面的元素默认从左往右排列，可以给子元素设置 -webkit-box-flex 来分配这个子元素所占空间的份数(比例)
				*/
				display: -webkit-box;
				/*排列顺序
					reverse 反向
				*/
				-webkit-box-direction: reverse;
				/*分配方式
					vertical 竖直分配
				*/
				-webkit-box-orient: vertical;
			}
			.reddiv {
				background-color: red;
				-webkit-box-flex: 5;
			}
			.bluediv {
				background-color: blue;
				-webkit-box-flex: 3;
			}
		</style>
	</head>
	<body>
		<div class="bigdiv">
			<div class="reddiv">1</div>
			<div class="bluediv">2</div>
		</div>
	</body>
</html>

三、倒影

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>倒影</title>
		<style type="text/css">
			img {
				margin-left: 300px;
				
				/*
					倒影
					1、above方向
					2、倒影和实像的距离

				*/
				-webkit-box-reflect: below 10px linear-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,1) 100%);
			}
		</style>
	</head>
	<body>
		<img width="300" src="http://img3.imgtn.bdimg.com/it/u=2180620476,2444084311&fm=206&gp=0.jpg" alt="">
		<img src="http://file.fh21.com.cn/fhfile1/M00/20/5F/o4YBAFXQMsSAHDcjAA7HEUK5pa8060.gif" alt="">
	</body>
</html>

四、阴影

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>阴影</title>
		<style type="text/css">
			.reddiv {
				width: 200px;
				height: 200px;
				background-color: red;
				/*
					box-shadow 代表一个容器的阴影：
					第一个值：阴影X方向的位移
					第二个值：阴影Y方向的位移
					第三个值：阴影的模糊程度
					第四个值：阴影的颜色
				*/
				box-shadow: 10px 10px 10px green,-10px 10px 10px blue,10px -10px 10px black;
				text-shadow: 10px 10px 10px pink;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="reddiv">文字文字文字文字文字<span>文字文字文字文字</span></div>
	</body>
</html>