div圆角边框,左上角悬浮标题,边框阴影效果

胡广毕业设计

于 2018-05-17 21:40:52 发布

阅读量1.5k

点赞数 3

文章标签： html css div边框圆角 div边框阴影 div悬浮标题

本文链接：https://blog.csdn.net/qq_38673212/article/details/80357322

版权

第一次css技术,谢谢!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		body{
				padding: 9px;  /*内边距*/
		}
		.box{
				width:29%;
				padding: 30px; /*内边距*/
				border:1px solid #666;border-radius:25px; /*圆边角*/
				box-shadow: 5px 5px 5px #888888;          /*阴影位置*/
			}
		.box_title{ 
			 	position:absolute;   /*绝对定位*/
				background: #FFF;    /*背景色白色*/
				top:4px; left:70px; /*调节div位置*/
				font-size: 20px;     /*字体大小*/
			}
	
	</style>
	<body>
		<div class="content_div box">
			<div class="box_title"> <strong>时间与内容</strong> </div>
			<div>补习时间:<input type="date" /><span> 至 </span><input type="date" /></div>
  		</div>
	</body>
</html>

效果图如下: