div四个角显示框

最新推荐文章于 2024-07-05 16:21:05 发布

牟云飞

最新推荐文章于 2024-07-05 16:21:05 发布

阅读量3.1k

点赞数 2

分类专栏： html

本文为博主牟云飞原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/myfmyfmyfmyf/article/details/85291184

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
 <BODY>
	<!-- 第一种方式 -->
	<style>
	  .rect {		
		width: 100px; 
		height: 100px;
		border-radius:5px;
		background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
					linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
					linear-gradient(to left, #f00, #f00) right top no-repeat,
					linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
					linear-gradient(to left, #f00, #f00) left bottom no-repeat,
					linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
					linear-gradient(to left, #f00, #f00) right bottom no-repeat,
					linear-gradient(to left, #f00, #f00) right bottom no-repeat;
		background-size: 5px 20px, 20px 5px, 5px 20px, 20px 5px; 
		background-color:#aaaaaa
	}
	</style>
	<div class="rect"></div>

	<br/>

	<!-- 第二种方式 -->
	<style>
		.box {
		    position: absolute;
			width: 100px;
			height: 100px;
			z-index:0;
			background:#eeeeee;
			overflow:hidden;
		}
		.box .box-top{
			position: absolute;
			top:0;
			width: 100%;
			height: 50%;
			z-index:1;
		}
		.box .box-top:before{
		  position: absolute;
		  top: 0;
		  left: 0;
		  content: '';
		  display: block;
		  height: 25%;
		  width: 25%;
		  border-left: 4px solid green;
		  border-top: 4px solid green;
		}
		.box .box-top:after{
		  position: absolute;
		  top: 0;
		  right: 0;
		  content: '';
		  display: block;
		  height: 25%;
		  width: 25%;
		  border-right: 4px solid green;
		  border-top: 4px solid green;
		}
		.box .box-upper{
			position: absolute;
			bottom:0;
			width: 100%;
			height: 50%;
			z-index:1;
		}
		.box .box-upper:before{
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  content: '';
		  display: block;
		  height: 25%;
		  width: 25%;
		  border-left: 4px solid green;
		  border-bottom: 4px solid green;
		}
		.box .box-upper:after{
		  position: absolute;
		  bottom: 0;
		  right: 0;
		  content: '';
		  display: block;
		  height: 25%;
		  width: 25%;
		  border-right: 4px solid green;
		  border-bottom: 4px solid green;
		}
		.box .box-content{
			height: 100%;
			width: 100%;
			padding-top:40%;
			overflow:hidden;
			z-index:3;
			text-align:center;  
		}
	</style>
    <div class="box">
		<div class="box-top"></div>
		<div class="box-content">123</div>
		<div class="box-upper"></div>
	</div>
 </BODY>
</HTML>