使用DIV+CSS无图片实现圆角效果-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangwg9999/article/details/83837551

本文介绍了一种使用DIV+CSS实现圆角效果的方法，无需使用额外的图片资源。通过精心设计的CSS样式和HTML结构，可以达到美观且兼容性强的圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用DIV+CSS无图片实现圆角效果，代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>WEB2.0 圆形边框 div 使用 css 做法</title>
<style type="text/css">
<!--
.wos {width:550px;margin:0px auto;}
.toelws {border:0px solid #BFD2FB;background:#F4F7FE;padding:0px;margin:0px auto;}
.toelws .te .te1,.toelws .te .te2,.toelws .bt .bt1,.toelws .bt .bt2
{width:11px;height:11px;overflow:hidden;font-size:1px;background:url("http://www.chinaddv.com/skin/chinadu_cn_060312/image/other/d0.gif") no-repeat;border:0px solid;}
.toelws .te {clear:both;}
.toelws .te .te1 {float:left;background-position:0 0;}
.toelws .te .te2 {float:right;background-position:-11px 0;}
.toelws .te .te3 {float:left;width:528px;border-top:1px solid #BFD2FB;}
.toelws .bt {clear:both;}
.toelws .bt .bt1 {float:left;background-position:-0px -11px;}
.toelws .bt .bt2 {float:right;background-position:-11px -11px;}
.toelws .bt .bt3 {float:left;width:528px;border-bottom:1px solid #BFD2FB;height:10px;font-size:1px;background:#F4F7FE;}
.content {padding:15px;font:11px verdana;border-left:1px solid #BFD2FB;border-right:1px solid #BFD2FB;}
-->
</style>

</head>
<body>

<div class="wos">
	<div class="toelws">
		<div class="te"><div class="te1"></div><div class="te3"></div><div class="te2"></div></div>
			<div class="content">
				<p>测试The MSDN Library What's New page contains a comprehensive list of all new and 
	revised content for the July 2001 release. Continue reading this page for 
	highlights of new content in the Library.<br>
	<br>
	Microsoft Office XP Developer Documentation<br>
	VBA Language Reference<br>
	<br>
	For developers who are building solutions with Microsoft Office XP, the VBA 
	Language Reference is a valuable tool. See Microsoft Access Visual Basic 
	Reference, the first in the list of these important language elements. <br>
	<br>
	New Embedded Documentation<br>
	<br>
	Also found in the July 2001 release of the MSDN Library is Embedded Developer 
	documentation for SQL Server 2000 Windows CE Edition, Windows CE for Automotive, 
	Target Designer Help and Component Designer Help for Windows NT Embedded 4.0.
	<br>
	<br>
	New SDK Documentation<br>
	<br>
	　</p>

			</div>
		<div class="bt"><div class="bt1"></div><div class="bt3"></div><div class="bt2"></div></div>
	</div>
</div>
</body>
</html>