div+css 一个四角边框为圆形边框非图片光用css实现-优快云博客

本文介绍了使用HTML、CSS和JavaScript实现复杂布局的方法，通过详细解释每个元素的作用和使用技巧，帮助开发者创建响应式且美观的网页设计。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>corner</title>
<style type="text/css" media="screen">
body{ padding:0; margin:0;}

.cornerboxSty{ width:600px; height:200px; margin:100px; padding:0;}
.middleSty{ width:99.5%; height:100%; margin:0; padding:0; background-color:#fff; border-left:solid 1px #ccc; border-right:solid 1px #ccc;}
.cornerSty{ display:block; width:100%; height:auto;margin-top:0;}
.cornerSty *{ display:block;height:1px; overflow:hidden; background-color:#fff; border-left:1px solid #ccc; border-right:1px solid #ccc;}
.c1Sty{margin: 0 6px;background-color:#ccc;}
.c2Sty{margin: 0 4px;border-width:0px 2px;}
.c3Sty{margin: 0 3px;}
.c4Sty{margin: 0 2px;}
.c5Sty{margin: 0 1px;height: 2px;}
</style>
</head>

<body>
<div class="cornerboxSty">
	<b class="cornerSty"><b class="c1Sty"></b><b class="c2Sty"></b><b class="c3Sty"></b><b class="c4Sty"></b><b class="c5Sty"></b></b>
	<div class="middleSty">
	
	</div>
	<b class="cornerSty"><b class="c5Sty"></b><b class="c4Sty"></b><b class="c3Sty"></b><b class="c2Sty"></b><b class="c1Sty"></b></b>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/biye/articles/2805094.html