3.3 Css盒模型border 边框-

原创 2018-12-24 20:49:29 298
摘要:3.3 Css盒模型border 边框border:1px 边框宽度 solid 边框样式 #ccc 边框颜色; 边框样式:实线solid,双线double 虚线dashed 点状虚线 dotted。设置单边边框样式border-top:1px solid red; 边框样式清除border:none;控制边框圆角:border-radius:10px圆角大小;边框阴影:box-shadow:10

3.3 Css盒模型border 边框

border:1px 边框宽度 solid 边框样式 #ccc 边框颜色; 边框样式:实线solid,双线double 虚线dashed 点状虚线 dotted。设置单边边框样式border-top:1px solid red; 边框样式清除border:none;

控制边框圆角:border-radius:10px圆角大小;边框阴影:box-shadow:10px(X轴偏移距离)10px(Y轴便宜距离)3px(阴影的宽度/模糊度)#ccc(阴影颜色);默认向外!!!inset是向内阴影 

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>border</title>
		<style type="text/css">
			body{margin: 0px; padding: 0px;box-shadow: 0px 0px 100px greenyellow;}
			#main{width: 500px;margin: auto;}
			.box{width: 0px;height: px;background-color: red;border-bottom: 100px solid blueviolet;border-left: 100px solid white;border-right: 100px solid white;margin:auto;}
			#a{width: 0px;height: 0px;background-color: red;border-bottom: 100px solid palegreen;border-left: 100px solid white;border-right: 100px solid white;margin:auto;}
			div[id='b']{width: 0px;height: 0px;background-color: red;border-bottom: 100px solid pink;border-left: 100px solid white;border-right: 100px solid white;margin:auto;}
			#c{width: 30px;height: 200px;background-color: gold;margin:auto;}
			
		</style>
	</head>
	<body>
		<div style="margin: auto; width: 20px; height: 20px;background: red; border: 1px solid red ;border-radius: 100%; "></div>
		<div id="main">
		<div class="box"></div>
		<div id="a"></div>
		<div id="b"></div>
		<div id="abc"></div>
		<div id="c"></div>
		</div>
	</body>
</html>

希望得到老师的点评!

批改老师:韦小宝批改时间:2018-12-25 09:38:15
老师总结:写的非常棒!总结的也很详细!课后一定要记得多练习才能牢牢掌握哦!

发布手记

热门词条