JAVAPOWER
- 浏览: 47525 次
- 性别:
- 来自: 深圳
-
文章分类
出自：http://www.soidc.net/articles/1183730975605/20071010/1199619672706.html
<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>
<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>
分享到：
发表评论
-
Bat 学习
2010-08-06 16:11 715本人转自：http://blog.csdn.net/it_ma ... -
Mysql忘记root密码的解决办法
2009-06-14 22:37 912出自 ： http://www.cnblogs.com/sha ... -
Windows 服务
2009-02-28 00:01 1021出自 ： http://www.allwiki.com/wik ... -
桌面图标文字背景无法透明解决办法（非通用）
2008-12-10 21:32 17711. 右击桌面空白处，依次单击“属性/桌面/自定义桌面/web ... -
CHM 无法打开解决方案
2008-12-10 13:12 1850出自：http://blog.csdn.net/r ... -
删除 Myeclipse 遗留的 workspace
2008-10-24 10:41 3819有时因需要而创建多个 workspace 并在它们之间切换，但 ... -
JS的正则表达式
2008-10-06 00:03 557出自 : http://www.iteye.com/topic ... -
Java staic block
2008-09-24 16:45 796出自: http://syniii.blog.sohu.com ... -
JSF javax.crypto.BadPaddingException: Given final
2008-09-24 11:47 2532出自：http://www.mail-archive.com/ ... -
Reading Notes
2008-09-09 09:45 7161. Jsp 页面 动态和静态 include 指令的不同 ... -
HTML 符号大全
2008-08-28 23:54 704出自 ： http://blog.csdn.net/icyco ... -
Windwos 验证轻松解决
2008-08-10 09:36 959出自：http://hi.baidu.com/%BA%DAca ... -
Some Likns
2008-07-25 12:51 787sourceforge 镜像：http://mirror.op ... -
MYSQL 字符集问题
2008-05-24 19:30 592出自:http://www.blogjava.net/ ... -
深入浅出URL编码
2008-05-24 16:04 915出自:http://blog.csdn.net/yzh ... -
堆栈和内存的关系(C++)
2008-05-17 15:57 1334出自：http://hi.baidu.com/an ... -
IE与FireFox的js和css几处不同点
2008-05-07 19:12 965出自：http://hi.baidu.com/zj ... -
Javascript 通过 URL 参数方式传值给 JSP 页面
2008-05-06 23:27 5852<%@ page language="java ... -
在 struts 引用中使用 tiles 模板时，JSP 文件引用外部文件需注意路径问题！
2008-05-06 14:11 2511先给出工程的目录结构： webproject | | ...
相关推荐
其中，利用纯CSS实现圆角矩形是前端开发者经常遇到的需求之一，尤其在设计按钮、卡片、菜单等元素时。下面，我们将深入探讨如何通过CSS来创建一个具有圆角的矩形，并分析给出的示例代码。 ### 纯CSS实现圆角矩形的...
总结一下，CSS中的圆角矩形主要依赖于`border-radius`属性来实现。通过灵活地设置这个属性，我们可以创建各种形状和效果的圆角元素，进一步丰富网页设计的表现力。在实际项目中，熟练掌握这一技术对于提升网页美观度...
css3中的边框一般多为矩形，也可以通过设置实现圆角边框的效果，通过border-radius:;通过设置该属性值得大小改变边框的圆角大小，从而达到自己需要的圆角边框效果
本文档介绍了两种不同的方法来实现圆角矩形：一种是简洁型CSS圆角矩形；另一种是带有3D效果的CSS圆角矩形。 #### 二、简洁型CSS圆角矩形 **1. CSS代码详解** - **通用样式定义**： - `.b1,.b2,.b3,.b4,.b1b,....
其中，"Css3圆角边框"是其中一个非常重要的特性，它允许我们创建具有平滑圆角的矩形元素，提升了网页的视觉效果和用户体验。这个特性在现代网页设计中被广泛使用，因为相比传统的JavaScript或图像方法，CSS3的圆角...
标题"css3实现圆角矩形"所指的就是利用CSS3的`border-radius`属性来设计带有圆角的矩形元素，这个特性极大地增强了网页的视觉效果，并且提供了更好的用户体验。描述中提到“兼容到IE6”，意味着我们将讨论如何在包括...
##### CSS圆角框基础知识 在网页设计中，为元素添加圆角边框是一种常见的美化手段，它可以让界面看起来更加友好和现代。早期的CSS版本（如CSS2）并不支持直接创建圆角效果，因此开发者通常会借助背景图片或者复杂的...
除了纯色背景，我们还可以利用CSS的渐变、图片背景等特性，给圆角矩形添加更丰富的视觉效果。例如，使用线性渐变： ```css background: linear-gradient(to right, #f00, #0f0); ``` 或者，通过`box-shadow`属性...
在网页设计中，使用Div+CSS纯图片实现圆角矩形是一种常见的技术，尤其是在CSS3的圆角边框属性还未普及或需要兼容老版本浏览器时。这种方法通过巧妙地利用图片和CSS布局，能够创建出带有圆角的效果。下面将详细阐述几...
三、CSS圆角矩形 圆角矩形可以通过调整`border-radius`值来实现。如果想让一个矩形的上左和上右角是圆角，而下左和下右角是直角，可以这样设置： ```css .rectangle { border-top-left-radius: 10px; border-top...
在CSS3中，通过`border-radius`属性可以轻松创建圆角矩形，但在不支持CSS3的老版本浏览器中，我们需要借助JavaScript来实现。一种常见的方法是使用额外的HTML元素或者修改元素的背景图来模拟圆角效果。这里我们将...
除了基本的圆角矩形，还可以通过CSS的其他属性来增强视觉效果，比如阴影（`box-shadow`）、边框（`border`）等。例如： ```css #round-corner-rectangle { width: 200px; height: 100px; background-color: #f0...
">简洁型 css圆角矩形 <b class="b4b d1"></b> <b class="b3b d1"></b> <b class="b2b d1"></b> <b class="b1b"></b> ``` 通过调整`.b2`, `.b3`, 和 `.b4` 的边框宽度和颜色，我们可以改变矩形的圆角大小和...
<p>div + CSS 圆角矩形 <div class="r4"></div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> ``` 这里的 `div#nifty` 是主容器，`div.rtop` 用于创建顶部的圆角，而 `div.r1`...
以下是三种不同的方法来实现纯CSS圆角矩形： 1. **简洁型圆角矩形方法1**： 这种方法通过组合多个带有不同边框和内边距的`<b>`元素来构建圆角矩形。每个`<b>`元素代表矩形的一个部分，例如`.b1`、`.b2`、`.b3`、`....
在网页设计中，使用div+CSS来创建圆角矩形是一种常见的方法，它利用了CSS的边框和背景属性来模拟圆角效果。在没有CSS3之前，由于浏览器的兼容性问题，这种方法尤为流行。本篇文章将深入解析如何通过div+CSS实现圆角...
"多彩的圆角矩形Dash边框.zip" 提供的开源项目显然关注的是这种设计元素的实现，尤其是那些具有圆角和虚线边框的矩形。圆角矩形在UI设计中非常常见，它们可以为按钮、卡片或其他界面组件增添柔和与现代感，而虚线...
首先，让我们看看简洁型CSS圆角矩形的实现。这种方法是通过嵌套`<b>`元素和设置不同边框来达到圆角效果。例如，代码1中，`.b1`到`.b4b`类分别定义了不同边框宽度和颜色，通过调整它们的位置和大小，形成一个完整的...
本文将详细介绍如何利用JS和CSS实现矩形对象的圆角效果。 首先，我们来探讨CSS中的圆角属性。CSS3引入了`border-radius`属性，允许开发者设置元素边框的圆角半径。例如，如果你想创建一个宽度和高度分别为200px的...
"DIV+CSS实现圆角"是这个主题的核心，它涉及到CSS3中的一些关键属性，如`border-radius`，用于创建非矩形的、具有圆角边框的元素。接下来，我们将深入探讨这个知识点。 首先，`<div>`是HTML中的一个块级元素，常...