以下方式都是从网上搜集转载的，有的出处已经忘记了，如果有不当之处，请见谅。
方式一
利用margin形成元素的缩进，优点是不用加载额外的图片，缺点很明显，如果网页中有大量的地方需要用到圆角，那必然造成html的冗长，代码重复，不易修改。
<!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" xml:lang="zh-cn" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css圆角</title>
<style type="text/css">
.b1, .b2, .b3, .b4, .b1b, .b2b, .b3b, .b4b, .b {
display:block;
overflow:hidden;
}
.b1, .b2, .b3, .b1b, .b2b, .b3b {
height:1px;
}
.b2, .b3, .b4, .b2b, .b3b, .b4b, .b {
border-left:1px solid #999;
border-right:1px solid #999;
}
.b1, .b1b {
margin:0 5px;
background:#999;
}
.b2, .b2b {
margin:0 3px;
border-width:2px;
}
.b3, .b3b {
margin:0 2px;
}
.b4, .b4b {
height:2px;
margin:0 1px;
}
.d1 {
background:#F7F8F9;
}
</style>
</head>
<body>
<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1"> 圆角设计 </div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>
</body>
</html>
方式二
分享到：
相关推荐
div实现圆角 div实现圆角 div实现圆角 div实现圆角 div实现圆角
### 让div圆角显示 在网页设计与开发过程中，为了提升用户体验以及视觉美观度，开发者经常需要对页面中的元素进行圆角...这种方式不仅代码简洁，而且易于理解和维护，同时兼容性良好，是实现圆角效果的最佳实践之一。
本篇文章将深入探讨`div`的一些进阶效果，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先，让我们关注圆角`div`。CSS3引入了`border-radius`属性，使得我们...
描述中提到的“源码下载”和“博文链接”表明存在一篇博客文章，其中提供了实现圆角DIV的代码示例，并且读者可以直接下载源代码进行学习和实践。通过访问给定的博客链接（https://gaojianqi6.iteye.com/blog/1213994...
不同的实现方式有其优缺点。图片方法适用于旧版浏览器，但不灵活；CSS方法在现代浏览器中广泛支持，且适应性强；HTML5的`border-radius`属性则是最直接且推荐的实现方式，它简化了代码，提高了效率。然而，对于不...
JavaScript制作div圆角是网页开发中的常见需求，它可以通过CSS3的border-radius属性来实现，但在某些不支持此属性的老式浏览器中，我们可能需要借助JavaScript来达成目标。本篇文章将深入探讨如何利用JavaScript实现...
div圆角实现 html方式非图片 [示例]
本文将深入探讨如何使用JavaScript（JS）来实现DIV和图片的圆角效果，同时强调其兼容性和简单性。 首先，我们来了解CSS3中的border-radius属性，它是实现圆角效果最直接的方法。但遗憾的是，早期的浏览器，尤其是IE...
在网页设计中，`DIV+CSS`是一种常见的布局方式，它通过HTML的`<div>`元素结合CSS（层叠样式表）来实现页面结构与样式的分离。然而，早期版本的Internet Explorer（尤其是IE6、IE7和IE8）并不支持CSS3的一些高级特性...
在网页设计中，"JS圆角DIV" 是一个常见的需求，尤其在CSS3之前的时期，因为CSS3之前的标准不支持直接设置元素的圆角。JavaScript（JS）被用来弥补这一功能缺失，通过动态创建和修改DOM元素的样式来实现圆角效果。...
总的来说，使用`div+css`实现圆角导航菜单需要理解HTML结构、CSS选择器、布局方式以及一些关键样式属性。通过合理的HTML标记和精心设计的CSS样式，我们可以创建出既美观又实用的圆角导航菜单，提升网站的整体视觉...
总结一下，实现`<div>`圆边圆角主要依赖于CSS的`border-radius`属性。通过合理设置该属性，我们可以创建出各种不同形状和尺寸的圆角效果。同时，要关注浏览器兼容性问题，为老旧浏览器提供备选方案。在实际项目中，...
5. 避免内容溢出：有时，如果内容超出圆角div的边界，可能会破坏圆角效果。你可以通过设置`overflow: hidden`来隐藏超出的内容，保持圆角的完整性。 6.响应式设计：在响应式布局中，你可能希望圆角在不同屏幕尺寸下...
CSS3引入了`border-radius`属性，这是实现圆角最直接和广泛支持的方式。`border-radius`允许你为每个角落设置不同的圆角半径，以创建不同程度的圆形或椭圆形边缘。例如，如果你有一个名为`myDiv`的div元素，你可以...
在网页设计中，实现圆角效果是常见的需求，可以提升界面的美观度和用户体验。在CSS3出现之前，实现圆角并非易事，通常需要借助...但了解这种JavaScript实现圆角的方式，有助于我们理解前端开发的历史和技术演进。
JavaScript（JS）虽然主要负责动态交互，但在某些情况下，可以用于辅助实现CSS样式，例如封装DIV圆角样式。本文将深入探讨如何使用JS来封装和应用CSS圆角效果，并通过提供的压缩包文件中的示例进行解析。 首先，让...
在本教程中，我们将探讨如何使用CSS创建自定义的圆角DIV效果。 首先，让我们理解CSS中的边框半径属性（border-radius）。这个属性允许我们设置元素边框的四个角的圆角程度。例如，如果你希望一个div的四个角都是10...
用div+css实现边框圆角,其实实现div圆角，有三种方法，也可以用圆角片来实现，还有一种技术，现在浏览器还不是很支持。
超简单实用JS实现DIV、图片圆角效果 兼容性很好