样例，上面是两个圆角Box。
<!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>
<title> 圆角样式 </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
.b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;}
.b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;}
.b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}
.bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;}
.bt {background: #EDF7FF;margin:0 2px;padding:5px;}
.bb {background: #FFFFFF;margin:0 2px;padding:5px;}
/**另一种颜色*/
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
.bb3{background: #E7F9E3;}/*标题背景颜色*/
</style>
</head>
<body>
<b class="b1"></b><b class="b2"></b><b class="b3"></b>
<div class="bc">
<div class="bt ">标题</div>
<div class="bb">
圆角三边 这里是内容
</div>
</div>
<b class="b3"></b><b class="b2"></b><b class="b1"></b>
<hr/>
<b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>
<div class="bc bb2">
<div class="bt bb3">另一种颜色</div>
<div class="bb">
另一种颜色 这里是内容
</div>
</div>
<b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>
</body>
</html>
这里是三个厚度的圆角，如果需要再圆角大一点，b这个标记多放一个，也就是多一个象素的圆角出来了。
如果要拷到新的地方使用，只要像
/**另一种颜色*/
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
.bb3{background: #E7F9E3;}/*标题背景颜色*/
这样添加一个样式就可以了。
分享到：
相关推荐
2. **无图片纯CSS圆角框，用特殊字符（&bull）**： 使用HTML的特殊字符`•`来创建圆角，这种方法的圆角更平滑，但仍然需要无语义标签，结构冗余，颜色调整有限，也不易实现渐变背景。适合对圆角平滑度有一定要求，...
通过以上分析，我们可以看到，无需图片即可实现div圆角效果的方法不仅简单高效，而且具有很好的可扩展性和灵活性。这种方法不仅适用于固定尺寸的元素，还可以轻松地应用到响应式布局中，极大地提高了网页设计的效率...
在Web开发中，圆角矩形是一种...特别是针对那些老旧浏览器或者需要精细控制圆角位置和样式的场景，使用图片来实现圆角矩形仍旧是一个不可替代的解决方案。掌握这些方法，可以为日常的Web开发提供更多的灵活性和稳定性。
标题“div+css打造可变高宽的圆角框”和描述中提到的正是这种方法，它通过将圆角框分解为五个图像，然后用CSS背景定位来创建一个可自适应内容大小的圆角框。 首先，我们需要理解为何要将圆角框图像分割成五部分。这...
本教程将深入探讨如何使用CSS和div元素来实现圆角效果。 首先，让我们了解CSS3中的几个关键属性： 1. `border-radius`：这是实现圆角的核心属性。通过设置这个属性，你可以改变元素边框的四个角的半径，从而形成...
在本篇文章中，我们将深入探讨如何使用JavaScript来处理 `div` 的圆角边角，以及相关的CSS知识点。 首先，让我们了解CSS中的`border-radius`属性。这是实现`div`圆角边角的核心属性。`border-radius` 可以设置为一...
在网页设计中，圆角效果可以为用户界面增添柔和与现代感，但早期的Web设计中，实现圆角通常依赖于图像。随着CSS技术的发展，...现在，你已经具备了用CSS实现无图片圆角效果的知识，可以开始尝试在实际项目中应用了。
本文将基于给定的代码示例，深入解析如何使用HTML和CSS来实现可变高宽的圆角框。 #### 1. 圆角框的基本原理 圆角框的实现通常依赖于CSS的`border-radius`属性，但在某些情况下，尤其是对于复杂的布局或老旧浏览器...
这种技术的优点在于，即使元素的宽度和高度是可变的，也能保持圆角效果，因为它依赖于CSS的背景定位而不是固定尺寸的图片。通过精确控制背景的位置，可以适应不同尺寸的元素。 总的来说，本教程旨在教授一种使用CSS...
- **优点**：无图片，圆角平滑，可自定义边框阴影，圆角半径可调整，结构简洁，重用性强。 - **缺点**：仅限于IE浏览器，无法在圆弧中添加丰富的渐变图像，因为圆弧外框是透明的。 - **实现原理**：利用IE特有的...
首先，无图片纯CSS圆角框是基于CSS3特性的解决方案，它通过创建多个内嵌的div元素并利用边框和背景色的结合，模拟出圆角效果。这种方法的优点在于无需额外的图片资源，具有较好的兼容性，适用于所有浏览器。然而，...
当我们谈论"用CSS实现圆角效果"时，我们指的是如何使用CSS来让元素的边角变得圆润，而不是传统的尖锐90度角。这个功能对于创建现代、友好的用户界面至关重要。 CSS3是CSS的一个重要版本，引入了许多新的特性和功能...
**第二种：无图片纯CSS圆角框，用特殊字符（&bull）** 这种方案利用HTML的特殊字符（•）配合CSS定位，模拟出平滑的圆角。同样具有良好的兼容性，但同样存在结构冗余问题，颜色调整有限，且不易实现渐变背景。...
在IT行业中，CSS3是Web设计者不可或缺的一部分，它提供了丰富的样式和效果，如圆角、阴影和渐变。然而，这些先进的特性在早期版本的Internet Explorer（IE6到IE9）中并不完全支持，这为开发者带来了挑战。为了解决这...
比如，使用圆角边框、渐变背景和悬停效果可以使按钮看起来更生动。 4. **表单验证**：在登录模版中，表单验证是必不可少的功能。利用CSS和JavaScript，可以实现客户端的实时验证，如检查用户名和密码是否为空，密码...
这个属性允许我们为元素的每个角落设定不同的圆角半径，使得原本硬朗的边角变得柔和。例如，要将一个div元素的四个角都设置为10像素的圆角，可以这样写： ```css div { border-radius: 10px; } ``` 如果要分别...