div+css实现圆角边框
发布时间:2007-10-21 08:55:00
标签:圆角,边框,div
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>
0
投稿
猜你喜欢
- 我们在使用很多新闻系统的时候,都会发现一个问题,尤其是使用 HtmlEdit 从WORD文档中直接拷贝文章(尤其里面有复杂表格和文字)的时候
- asp编程中我们经常要处理字符串,比如一个新闻列表,在我们编写asp程序的时候就要考虑到新闻标题的长度不确定性,因为有的文章标题可能很长,可
- 用HZHOST实用工具集的服务器安全设置里安装了MSSQL安全配置,现在SQL2000还原不了数据库了,从还原选定设备浏览文件夹时出现&qu
- 众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己
- 问:假如我的一个表里含有(a,b,c,d)和(a,b)形成组合键。我能在列值中写这个查询吗?例如: select a,c,d from my
- 服务器响应HTTP的类型ContentType大全,使用方法:<% Response.ContentType =&
- Javascript 选择器(selector engine)似乎从 jQuery 流行以来就大行其道,改变了原有 Javascript 选
- 1、把这段拷到DW里,存成HTML文件。<HTML><HEAD><TITLE>move backgrou
- 当你使用Lumigent log Explorer连接服务器后,选择具体的数据库实例时报错,提示 &nbs
- 一、IE透明度问题在IE的高度超过某一阀值时,会产生透明度不时失效的问题,这现象比较奇怪,(会有的时候全黑,有的时候全白)你有可能无法复现。
- 对数据库的备份是网站管理人员的必修课,那么常用的数据库备份方式有哪些呢?应如何选择?数据库备份有四种类型,分别应用于不同的场合,下面简要介绍
- 这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了,字体放大、显示所有图片、显示Cookie等等
- 内容摘要:有很多朋友虽然安装好了mysql但却不知如何使用它。在这篇文章中我们就从连接mysql、修改密码、增加用户等方面来学习一些mysq
- 知识点: 1、拼接SQL 2、UNION ALL 3、EXEC 其代码如下: 代码如下:--测试示例 declare @sql
- 这段时间常给来面试的同学用《 你是一个职业的页面重构工作者吗? 》中三个部分的不同阶段去做自测,发现很多人都自我感觉良好,给我的回答基本都是
- 感谢大家对《 CSS Sprites 样式生成工具 》的喜爱,综合了1.x版本时大家所提出来的意见和建议,2.0版本主要的改变有下面几点:修
- 从2004年开始,我开始进入雅虎的异常表现小组。我们是一个很小的队伍,专门针对雅虎的产品进行质量检测和改进,我作为一个后端工程师,现在却开始
- 漂亮的代码是漂亮网站的基础,优秀的 CSS 只存在与同样优秀的 HTML 之上,干净的,语义的 HTML 代码让一个网站更健壮。本文讲述了1
- 如何在网上查找链接? 见下:findlinks.html<html><head>
- 兼容主流浏览器,独立样式表,可以很方便的进行视觉效果自定义截图:模拟下拉菜单演示代码:<!DOCTYPE html PUBLIC &q