`

div+css实现圆角边框

CSSFirefoxHTML 
阅读更多

div+css实现圆角边框，在网络上查看了一下，很多都是实现圆角的矩形的方法，我在这里介绍的是实现圆角矩形边框的方法。

用代码说明问题：

<html>
<head>
<style>
#a{
border-left:1px #333 solid;
border-right:1px #333 solid;
width:300px;
height:500px;
}
.b{
height:1px;
overflow:hidden;
border-left:1px #333 solid;
border-right:1px #333 solid;
}
</style>
</head>
<body>
<div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div id="a">

以我的能力，纯DIV+CSS实现的效果只能做到这样了。这里是放置内容的地方，自己看一看代码的规律，很容易明白。

代码很简单，a层为放置内容的层，其width值为300，然后向外以2像素的宽度递减。最外一层要加上background为个属性，目的是要将上、下两线条呈现出来。

这里实现了3像素的圆角边框，b层的数量决定了要实现多少个像素边框。建议不要多于3层，最好是2层，即2像素圆角边框，或者1层，因为层数越多，圆角的表现就越不圆滑。在firefox IE6 都通过测试。

</div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
</div>
</body>
</html>

分享到：
| JS常用语句
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div+css实现圆角导航菜单的效果

    本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先，`div`是HTML中的一个块级元素，它可以被用作容器，用于组织页面内容。在创建导航菜单时，`div`可以用来包裹整个菜单或者单独的菜单项。例如...

    DIV+CSS 圆角边框

    标题“DIV+CSS 圆角边框”指向的是一个关于前端网页设计的技术主题，特别是如何使用HTML和CSS来实现元素的圆角边框效果。在Web开发中，DIV元素常被用作布局容器，而CSS（层叠样式表）则用于控制页面的样式和结构。在...

    DIV+CSS实现圆角.rar

    "DIV+CSS实现圆角"是这个主题的核心，它涉及到CSS3中的一些关键属性，如`border-radius`，用于创建非矩形的、具有圆角边框的元素。接下来，我们将深入探讨这个知识点。 首先，`&lt;div&gt;`是HTML中的一个块级元素，常...

    div+css呈现圆角层示例

    在这个特定的案例"div+css呈现圆角层示例"中，我们将探讨如何利用CSS技术创建具有圆角边框的`div`层，而无需依赖背景图片。这种技术对于提升网页的可读性和美观性至关重要，因为它可以减少HTTP请求，提高页面加载...

    div+css圆角边框的制作

    在本主题中，我们将深入探讨如何使用 `CSS` 制作具有圆角边框的 `div` 元素，这在现代网页设计中非常常见，可以提升网站的视觉效果和用户体验。 首先，让我们了解 `CSS` 的边框属性。边框由三个主要属性构成：边框...

    W3C网页标准、div+css教程、xhtml+css介绍

    4. **盒模型**：理解CSS盒模型是关键，它包括内容（content）、内边距（padding）、边框（border）和外边距（margin），影响元素的实际尺寸和位置。 **XHTML+CSS** XHTML+CSS是遵循W3C标准的开发方式，强调结构和...

    div+css后台登录模版

    比如，使用圆角边框、渐变背景和悬停效果可以使按钮看起来更生动。 4. **表单验证**：在登录模版中，表单验证是必不可少的功能。利用CSS和JavaScript，可以实现客户端的实时验证，如检查用户名和密码是否为空，密码...

    div+css制作非常实用的24款分页页码css代码

    例如，可以设置分页容器的对齐方式，按钮和链接的背景色、边框、圆角、字体大小等属性。例如： ``` .pagination { text-align: center; } .prev-page, .next-page { background-color: #f0f0f0; border: 1px ...

    div+css 可伸缩的圆角

    在网页设计中，"div+css 可伸缩的圆角"是一个常见的需求，它涉及到CSS3中的边框半径属性，以及如何构建响应式的布局。让我们深入探讨这个主题。 首先，`div`是HTML中的一种块级元素，通常用于组织页面结构。`div`...

    Div+Css的Tab菜单

    - Tab的样式可以多样化，包括扁平化设计、3D效果、圆角、渐变色、图标组合等，这些都是通过CSS实现的。 - Tab可以是水平的，也可以是垂直的，甚至可以设计成不规则形状，满足不同设计需求。 - 注意保持Tab的一致...

    html5+div+css3网站样式模板

    DivCSS则通常指使用Div元素配合CSS进行布局和样式设计。H5模板通常包含预设的HTML5结构和CSS3样式，方便开发者快速构建网页。CSS3学习则涉及对CSS3新特性的理解和实践，如选择器、布局、动画等。 在...

    DIV+CSS漂亮的样式

    在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它通过定义不同的CSS（层叠样式表）类来控制HTML中的`&lt;div&gt;`元素，从而实现页面的精美设计和结构化布局。本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS...

    div+css制作圆角矩形的原理示例解读

    在网页设计中，使用div+CSS来创建圆角矩形是一种常见的方法，它利用了CSS的边框和背景属性来模拟圆角效果。在没有CSS3之前，由于浏览器的兼容性问题，这种方法尤为流行。本篇文章将深入解析如何通过div+CSS实现圆角...

    用Css实现div圆角边框

    用div+css实现边框圆角,其实实现div圆角，有三种方法，也可以用圆角片来实现，还有一种技术，现在浏览器还不是很支持。

    十天学会DIV+CSS(WEB标准)

    通过CSS，我们可以为这些DIV定义宽高、边距、背景、边框等属性，进而构建出复杂的网页布局。在本教程中，你将学习如何使用类选择器、ID选择器以及通配符选择器来精确地定位和控制页面上的各个元素。 教程可能涵盖...

    div+css select效果

    本教程将详细讲解如何使用`div+css`来实现一个兼容多浏览器的美化版`select`效果。 首先，我们需要创建一个`div`元素作为`select`的替代品，这将作为我们自定义样式的容器。通过设置`position`属性为`relative`，...

    Div+Css模版

    Div+CSS可以很好地实现不同屏幕尺寸和设备的适应性布局，确保在任何设备上都能呈现出良好的显示效果。 3. **定位与浮动**：在Div+CSS布局中，浮动（float）和定位（positioning）是控制元素位置的关键。通过合理...

    HTML5+CSS3 圆角边框的绘制.pdf

    圆角边框常与其他CSS3特性一起使用，如渐变背景、阴影（`box-shadow`）和边框图像（`border-image`），以创建更复杂的视觉效果。例如，可以使用`border-image`创建带有渐变或图案的圆角边框。 总之，`border-...

    HTML5+CSS3 圆角边框的绘制.docx

    HTML5 和 CSS3 的引入为网页设计带来了许多新的特性，其中圆角边框的绘制是其中一个重要的美化元素。在 CSS3 中，通过 `border-radius` 属性，我们可以轻松地为元素添加圆角，使得边框不再是传统的直角，而是平滑的...

    div+css实现圆角即网页上常用的圆角效果

    在使用DIV+CSS实现圆角效果时，通常通过设置元素的边框半径（border-radius）属性来实现。边框半径属性可以单独设置四个角的半径大小，也可以只设置一个值作为统一值。CSS3中的边框半径属性有以下几种情况： - ...

Magicbox
Global site tag (gtag.js) - Google Analytics