<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:25px 1em 100px 1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}
</style>
</head>
<body>
<div id="xsnazzy">
<b class="xtop">
<b class="xb1"></b>
<b class="xb2"></b>
<b class="xb3"></b>
<b class="xb4"></b>
</b>
<div class="xboxcontent">
<h1>Rounded borders without images</h1>
<p> </p>
</div>
<b class="xbottom">
<b class="xb4"></b>
<b class="xb3"></b>
<b class="xb2"></b>
<b class="xb1"></b>
</b>
</div>
<!-- end of wrapper -->
</body>
</html>
转自：http://www.bbon.cn/2009/03/7-kinds-of-css-rounded-box-solution.html
分享到：
相关推荐
### 无懈可击的CSS圆角边框(自由伸缩) #### CSS圆角边框技术解析 在网页设计中，圆角边框是一种常见的视觉元素，能够为页面带来更加柔和、美观的效果。然而，当涉及到创建一个可以自由伸缩的圆角边框时，就需要...
css 圆角实现例子,无图实现CSS圆角
很简单的css圆角~让你突破css的困扰
【CSS圆角提示框】是一种常见的前端开发技术，主要用于创建具有视觉吸引力且用户体验良好的提示信息。在本案例中，我们看到的"css圆角提示框.zip"是一个包含纯HTML和CSS代码的压缩包，用于展示如何在不同浏览器上...
这个压缩包“多种CSS圆角特效代码及演示”显然是一个包含各种CSS圆角效果实现的资源集合，适合设计师和开发者学习和参考。CSS圆角是通过`border-radius`属性实现的，它允许我们创建出不再是直角的边框，从而为元素...
总结起来，创建自适应宽度的CSS圆角背景按钮，主要依赖于`border-radius`属性实现圆角效果，利用`display: inline-block;`和不设定固定宽度实现自适应宽度，以及通过适当的内填充和文本对齐方式保持内容居中。通过...
CSS圆角制作器 v1.0 是一个专门用于生成CSS圆角样式的在线工具，它简化了设计过程，使得创建具有圆润边缘的网页元素变得轻而易举。 **一、CSS3圆角边框** CSS3中的`border-radius`属性是实现圆角边框的关键。通过...
#### 一、CSS圆角矩形概述 在Web设计中，使用CSS创建圆角矩形可以提升网站的视觉效果。本文档介绍了两种不同的方法来实现圆角矩形：一种是简洁型CSS圆角矩形；另一种是带有3D效果的CSS圆角矩形。 #### 二、简洁型...
"百度百科里的CSS圆角效果.rar"这个压缩包文件，很可能是包含了一个示例，展示了如何在实际项目中应用CSS圆角效果。 CSS圆角效果主要通过`border-radius`属性实现。这个属性允许我们设置元素边框四个角落的圆润程度...
在标题“很不错的css圆角[百度有啊]”和描述“代码简结,重复利用高很不错的css圆角[百度有啊]”中，我们看到对CSS圆角的高度评价，这表明这是一种简洁且高效的设计技巧。 要理解CSS圆角，首先我们需要知道如何通过...
标题"纯CSS圆角 很简单"和描述都强调了使用CSS实现圆角效果的简便性。本文将深入探讨如何使用CSS创建圆角，以及这一技术的基本原理和相关属性。 首先，CSS3引入了一组新的边框属性，使得创建圆角变得非常直观。这些...
本文将深入探讨四种常见的CSS圆角框实现方法。 1. **无图片纯CSS圆角框**： - **优点**：兼容所有浏览器，无需额外图片资源。 - **缺点**：需要添加大量无语义的HTML标签，结构冗余，不利于重用。若需调整不同...
"不错的css圆角"这个主题涉及到CSS中的边框半径属性，它允许我们轻松地为任何元素添加圆角效果。 CSS边框半径属性（border-radius）是在CSS3中引入的，用来取代早期的一些复杂方法，如使用图片或者JavaScript来实现...
在网页设计中，`div` 和 `CSS` 是不可或缺的部分，尤其当涉及到界面美观和用户体验时，圆角设计显得尤为重要。圆角边框不仅能够使网页元素看起来更加柔和，还能提升整体设计的现代感。本篇文章将深入探讨如何使用 `...
"css兼容包-CSS圆角、阴影"正是为了解决这个问题而存在的。 标题中的“CSS圆角”是指CSS3中引入的一种样式，允许我们为元素的边角设置圆润的效果，而不是传统的直角。`border-radius`属性是实现这一效果的关键。它...
本文将深入探讨CSS圆角边框的原理以及如何在实际网页设计中应用。 一、CSS圆角边框的原理 CSS3引入了`border-radius`属性，允许我们设置元素边框的圆角半径。这个属性可以接受一到四个值，分别对应元素的上左、上...
在这个压缩包"超棒的纯CSS圆角下拉菜单.rar"中，包含了一个无JavaScript依赖的下拉菜单实现，主要展示了CSS在构建交互式用户体验方面的强大能力。 1. **纯CSS下拉菜单**： CSS下拉菜单是一种常见的网页导航元素，...
CSS圆角是网页设计中一个重要的视觉效果，它允许元素的边角呈现出平滑的圆形或椭圆形，而不是传统的直角。在CSS中，我们使用`border-radius`属性来实现这个效果，它提供了对元素四角半径的控制，使得元素的外观更加...
在早期的CSS版本中，实现圆角边框需要使用图片或者JavaScript，但随着CSS3的引入，这一过程变得更加简洁。 首先，我们来看CSS3中的`border-radius`属性，这是实现圆角边框的关键。`border-radius`允许开发者为每个...