目前所能写出的最简洁圆角边框了，不需要额外标签。也可以只要一副图片，但这时就得添加一个额外标签。
这是以前写的，今天又去写的时候，发现还没有以前写的那么感觉上优雅了。还是记下来，以免后忘。
<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
//-->
</script>
<style type="text/css">
body {background:#fff;}
div {overflow:hidden;zoom:1;}
.box {padding-bottom:4px;width:190px;background:url("c-b-b.png") no-repeat left bottom;}
.box h3 {margin:0;padding:0;background:url("t-bg.png") no-repeat;height:20px;}
.box .c {border:1px solid #5c9ec0;border-width:0 1px;padding:10px;}
</style>
</head>
<body>
<div class="box">
<h3>title</h3>
<div class="c">
<p>content</p>
</div>
</div>
</body>
</html>
主要css:
.box {padding-bottom:4px;width:190px;background:url("c-b-b.png") no-repeat left bottom;}
.box h3 {margin:0;padding:0;background:url("t-bg.png") no-repeat;height:20px;}
.box .c {border:1px solid #5c9ec0;border-width:0 1px;padding:10px;}
附件box2.zip是一副图片实现的圆角。
分享到：
相关推荐
早期，为了在不同浏览器（如IE、火狐）间实现圆角边框的兼容性，开发者会使用图片或者JavaScript来实现，但随着CSS3的普及，现在我们可以通过CSS直接定义圆角边框，而无需额外的图片或脚本支持。 以下介绍两种无...
总的来说，纯CSS实现圆角边框等效果是网页设计中的基本技能，掌握这些技巧能够帮助开发者在不依赖额外资源的情况下，创建出美观且功能丰富的网页界面。随着CSS技术的不断发展，未来将有更多高效、灵活的方式来实现...
在CSS3出现之前，为了实现圆角效果，开发者们常常需要使用额外的图片或者复杂的背景图像，这样做不仅增加了页面的加载时间，也不便于维护和修改。CSS3通过简单的属性设置，使得实现圆角边框变得异常简单。 在介绍...
3. **图片圆角框**： - **优点**：兼容性好，能呈现复杂的圆角效果，圆角平滑无锯齿，适用于视觉要求高的场景。 - **缺点**：需要为每个不同半径的圆角创建独立的图片，增加HTML结构冗余，不利于重用。 - **实现...
它利用JavaScript生成一系列小的、透明的内嵌元素，这些元素的组合形状可以形成圆角，然后将它们附加到目标元素的角落，从而实现了无需图片即可创建圆角边框的效果。这种方法不仅减少了HTTP请求，提高了页面加载速度...
`border-radius`允许我们直接通过CSS定义元素边框的圆角半径，无需使用额外的图片，代码更简洁，渲染效率更高，兼容性也更好。 总的来说，"简单圆角框"的实现方式体现了CSS在网页设计中的灵活性，即使在技术有限的...
5. **自定义选项**：除了基本的圆角设置外，一些高级工具可能还提供了额外的自定义选项，比如添加阴影、边框等效果，进一步增强图片的视觉吸引力。 在我们的压缩包文件"圆角图片制作"中，很可能包含了这样一款工具...
然而，随着CSS3的出现，我们可以利用边框属性来轻松创建各种圆角矩形，无需依赖图片，这既提高了性能，也简化了代码。本篇文章将详细介绍如何仅用CSS边框实现圆角矩形，包括简洁型、无图片实现以及3D圆角矩形的方法...
HTML 和 CSS 结合可以轻松实现这种效果，无需依赖额外的图片资源。本示例将详细介绍如何使用纯 CSS 实现一个简单的圆角表格效果。 首先，我们需要理解 CSS 的边框半径属性（border-radius），这是实现圆角效果最...
在Android原生的ImageView组件中，实现这样的效果通常需要自定义视图或者使用额外的图片处理库，如Glide或Picasso，但这些方法可能会增加应用的复杂性和内存消耗。而这个Kotlin实现的ImageView则提供了一种更直接、...
**jQuery + shutter.js 圆角百叶窗图片轮播代码详解** 在网页设计中，动态效果和交互性是提升用户体验的重要元素。`jQuery` 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理以及动画效果。而 `...
此外，"ImageFramer"库可能还提供了其他额外的功能，如添加边框、阴影等效果，或者支持多种格式的图片输入和输出。对于开发者来说，理解这些源码不仅可以学习到具体的图像处理技巧，还能深入理解如何设计和实现一个...
- 可调整圆角半径 - **应用场景**：适用于追求美观界面设计的应用。 **QuadRoundMenu / QuadCurveMenu** - **简介**: 这两个库提供了圆形菜单和曲线菜单的功能。 - **特性**： - 圆形布局 - 动态添加菜单项 - ...
`css`文件包含了上述的各种CSS样式规则，`images`文件夹可能存储了用于箭头图标的图片资源，而`js`文件可能包含了额外的JavaScript代码，用于处理交互逻辑或进一步自定义下拉框的行为。 总结，通过CSS，我们可以...
CSS3的引入增强了模板的设计能力，比如过渡效果、动画、阴影、圆角边框等，使得网页更加美观且吸引用户。同时，CSS还负责媒体查询，使得模板能在不同设备上呈现出良好的适应性，无论是桌面电脑、平板还是手机，都能...
- **CSS3:** 提供了大量的新特性，比如响应式设计所需的媒体查询、圆角边框(`border-radius`)、阴影效果(`box-shadow`)、动画和过渡效果(`transition`和`animation`)等，这些新特性不仅提升了网页的视觉效果，还极...