<!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" />
<style type="text/css">
<!–
* { margin:0; padding:0; }
body { font: 11px Arial, sans-serif; padding: 10px; color: #333; }
a { text-decoration:none; }
a:hover { text-decoration: underline; }
/* 以下为纯CSS圆角 */
.box { padding: 10px; border-right: 1px solid #09C; border-left: 1px solid #09C; }
b, u, i { display: block; height: 1px; overflow: hidden; }
/* 第一种圆角 */
b.f1 { margin: 0 4px; background: #09C; }
b.f2 { margin: 0 2px; border-right: 2px solid #09C; border-left: 2px solid #09C; }
b.f3 { height: 2px; margin: 0 1px; border-right: 1px solid #09C; border-left: 1px solid #09C; }
/* 第一种圆角结束 */
/* 第二种圆角 */
u.f1 { margin: 0 3px; background: #09C; }
u.f2 { margin: 0 1px; border-right: 2px solid #09C; border-left: 2px solid #09C; }
u.f3 { margin: 0 1px; border-right: 1px solid #09C; border-left: 1px solid #09C; }
/* 第二种圆角结束 */
/* 第三种圆角 */
i { margin: 0px 1px; background: #09C; }
/* 第三种圆角结束 */
–>
</style>
</head>
<body>
<p> </p>
<div style="width:400px;">
<b class="f1"></b>
<b class="f2"></b>
<b class="f3"></b>
<div class="box">第一种纯CSS圆角，纯CSS的优点是不用到图片，加载比较快，自动延伸不受到图片的影响。</div>
<b class="f3"></b>
<b class="f2"></b>
<b class="f1"></b>
</div>
<p> </p>
<div style="width:300px;">
<u class="f1"></u>
<u class="f2"></u>
<u class="f3"></u>
<div class="box">第二种纯CSS圆角，和第一种圆角差不多。</div>
<u class="f3"></u>
<u class="f2"></u>
<u class="f1"></u>
</div>
<p> </p>
<div style="width:200px;">
<i></i>
<div class="box">第三种纯CSS圆角，这个看不出好大的效果没有技术含量！</div>
<i></i>
</div>
<p></p>
<p></p>
</body>
</html>
分享到：
相关推荐
"百度百科里的CSS圆角效果.rar"这个压缩包文件，很可能是包含了一个示例，展示了如何在实际项目中应用CSS圆角效果。 CSS圆角效果主要通过`border-radius`属性实现。这个属性允许我们设置元素边框四个角落的圆润程度...
【标题】"提取自百度有啊的css圆角效果.rar" 涉及的核心知识点是CSS3中的圆角边框效果。在Web开发中，CSS3的引入为设计师提供了更丰富的样式选择，其中之一就是实现无需图片即可创建带有圆角的元素。在本压缩包中，...
CSS圆角效果是CSS3中的一项重要特性，它允许我们无需借助背景图片就能实现元素边角的圆润化处理，从而为网页界面带来更加美观和现代感的视觉体验。本篇文章将深入探讨如何利用CSS来创建无背景图片的圆角效果。 首先...
这个"CSS圆角效果"是一个经典案例，它展示了如何使用CSS来创建具有圆角的元素，而无需使用图片或者JavaScript。 在CSS3之前，要创建圆角效果通常需要使用切角图片或者复杂的背景图像定位技巧，这不仅增加了页面加载...
纯CSS圆角效果纯CSS圆角效果纯CSS圆角效果
这个压缩包“多种CSS圆角特效代码及演示”显然是一个包含各种CSS圆角效果实现的资源集合，适合设计师和开发者学习和参考。CSS圆角是通过`border-radius`属性实现的，它允许我们创建出不再是直角的边框，从而为元素...
总结，CSS圆角制作器 v1.0 是一款实用的在线工具，它帮助开发者和设计师轻松创建美观且兼容性的CSS圆角效果。在现代Web设计中，理解并掌握CSS3的圆角边框不仅能够提升页面的视觉吸引力，也是优化用户体验的重要一环...
在本文中，我们将探讨如何使用JavaScript来实现抽象的CSS圆角效果，从而创建一个可复用且灵活的组件。CSS圆角效果通常通过CSS3的`border-radius`属性来实现，但在不支持此属性的老版本浏览器中，我们需要采取其他...
本案例中提到的“提取自百度有啊的css圆角效果”就是一种利用图片和CSS结合的方式来实现圆角的方法。 这种方法通常被称为“图像切角”或“图片拼接法”。核心思想是通过四个小的背景图像（左上角、右上角、左下角和...
在网页设计中，CSS圆角效果是常见的视觉优化手段，它可以为元素添加平滑的边缘，使得用户界面更加美观和现代。"CSS圆角效果（无背景图片）"的主题着重于如何利用纯CSS和JavaScript技术来实现这一效果，而无需依赖...
首先，实现CSS圆角效果最基础的方法是通过`border-radius`属性。这个属性允许我们设置元素边框的四个角落的半径，创建出不同程度的圆角。例如： ```css .box { border-radius: 5px; } ``` 上述代码会让一个元素的...
【描述】中的信息简洁明了，表明这是一个使用PHP编写的源码，专门用于生成实现CSS圆角效果的代码。这意味着源码可能包含一个用户界面，用户可以通过输入参数（如圆角半径、边框宽度等）来定制他们的CSS规则，然后...
本篇文章将深入探讨如何利用CSS来创建圆角效果，这在现代网页设计中是非常常见且实用的技巧。 首先，我们了解CSS中实现圆角效果的主要属性——`border-radius`。这个属性允许我们将元素的边框转换为圆形或椭圆形，...
本文将深入探讨如何使用JS来封装和应用CSS圆角效果，并通过提供的压缩包文件中的示例进行解析。 首先，让我们理解CSS中的圆角属性。`border-radius` 是CSS3引入的一个特性，允许我们为元素的边框添加圆角效果。通过...
在网页设计中，`div` 和 `CSS` 是不可或缺的部分，尤其当涉及到界面美观和用户体验时，圆角设计显得尤为重要。圆角边框不仅能够使网页元素看起来更加柔和，还能提升整体设计的现代感。本篇文章将深入探讨如何使用 `...
【标题】"基于PHP的CSS圆角制作器 php版.zip" 涉及的主要知识点是使用PHP编程语言创建一个工具，该工具能够自动生成实现CSS圆角效果的代码。CSS圆角是网页设计中常见的一种视觉效果，它使得网页元素（如按钮、卡片或...
在网页设计中，CSS3引入了许多新的特性，其中包括圆角效果。圆角可以让网页元素看起来更加柔和，提高用户体验。在CSS3之前，我们通常需要使用图片或者复杂的CSS hack来实现圆角，但这些方法往往效率低下且维护困难。...
一、CSS圆角属性 CSS3引入了`border-radius`属性，用于设置元素边框的圆角半径。这个属性可以分别设置四个角的圆角半径，也可以一次性设置所有角的圆角半径。基本语法如下： ```css element { border-radius: ...