`
rybby
  • 浏览: 20182 次
  • 性别: Icon_minigender_1
  • 来自: 玉林
最近访客 更多访客>>
社区版块
存档分类
最新评论

锐拜:CSS实现圆角矩形之函数版

阅读更多

锐拜:CSS实现圆角矩形之函数版

作者:Rybby  E-mail:rybby@163.com    完稿时间:2009-06-24

多时候,看到很多网友,问了相同的很多问题:怎样用纯 CSS 样式代码(非圆角图片)实现圆角矩形的效果?
其实呢,挺简单的。但是呢,也挺复杂。这样说,还挺矛盾。
好,先从简单的说。不说,还是先看吧(是否觉得锐拜我挺婆妈)。

<html>
<head>
<style type="text/css">
.box {width:220px; border:0px;}
.cb {height:80px; border:solid #3F556F; border-width:0px 1px;}
.t1,.t2,.t3,.t4,.b1,.b2,.b3,.b4 {margin:0px; padding:0px; height:1px; border:solid #3F556F; border-width:0px 1px; overflow:hidden;}
.t1 {margin:0px 5px; border-width:1px 0px 0px 0px; height:0px;}
.t2 {margin:0px 3px; border-width:0px 2px;}
.t3 {margin:0px 2px;}
.t4 {margin:0px 1px; height:2px;}
.b1 {margin:0px 1px; height:2px;}
.b2 {margin:0px 2px;}
.b3 {margin:0px 3px; border-width:0px 2px;}
.b4 {margin:0px 5px; border-width:0px 0px 1px 0px; height:0px;}
</style>
</head>
<body>
<div class="box">
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
<div class="t4"></div>
<div class="cb">这个盒子是存放内容的</div>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
</div>
</body>
</html>

OK!把上面的代码另存为 .htm 或者 .html ,然后用浏览器打开看看,看到圆角矩形了吧?是不是挺简单!啥!没看到!!!请问阁下您用的是什么浏览器?如果用 FF(firefox)浏览器没看到圆角那是你胡扯,如果用 IE 浏览器没看到圆角那是我糊涂,忘了在 <html> 前面加上 DTD 声明。现在返回加上这句 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> ,再试试看,终于看到圆角了吧。通常地,在 FF 浏览器上显示很完美的网页,一放到 IE 上就会有很多问题,这之中就有些是跟文档的类型声明(DTD)有关的。从 html 4.0 到 xhtml 1.0 常用的文档声明有过渡型(Transitional)与严格型(Strict),为了编写出标准化与规范化的网站页面,以及适应将来推出的 xhtml 2.0 ,锐拜建议您应该尽量采用 xhtml 1.0 的文档声明,对于 html 4.0 ,我们应该学会放弃。啊!扯远了!扯远了!不知不觉就说了一堆闲话,也许是废话,如果因此而浪费了您的宝贵时间,那可就是费话了。
屁话!

刚才说了,应该是看了,用 CSS 实现圆角是挺简单的。简单是从它实现的原理来说的,但是使用起来就太复杂了。在想要实现圆角的地方必须堆加几个 DIV ,然后再设置样式属性,如果一个页面要在多处使用圆角效果,而且还要不同的样式,那工作量可是惊人的、恐怖的、繁琐的。有没有简单的方法呢?答案肯定是有 的,但不是最简单的,锐拜能想到的只有 JavaScript 。JS 这东西可是个好东西,推崇它、讨论它、喜欢它的人从西能排到东。在以前,人们喜欢拿它来设计另人讨厌的弹窗,恶意修改网页,以至于让它有点臭名远扬了。但 随着 Ajax 技术的流行使它又成为 web 编程的明日之星,借助 JS ,程序员可以设计出交互性很强的动态页面,现在越来越多人热爱它、使用它、宣传它……

JS 的好处我就不多说了,现在说一下用 JS 实现圆角矩形的原理。其实没有一点儿技术含量,因为要在实现圆角的地方输入多个 DIV ,所以,我们就使用程序的 for 循环代替繁琐的工作量,仅此而已。再高一点的技术(其实只能算是技巧)也只是用 JS 操作 DOM 节点,这样我们就可以在需要实现圆角的地方只调用一个函数再加几个参数,方便地实现圆角的弧度,效果简直就像变魔术;最终,我们将繁数化成了小事,工作起 来那可真神速。经过胡乱鼓捣一番之后,锐拜写了这个小程序 arccorner.js(弧形角),通过它可以在网页中方便地实现圆角矩形,具体的代码锐拜就不贴出来了,需要使用或者研究的朋友可以到下面这个地址下 载。

arccorner使用方法:
在需要实现圆角效果的html元素的前面或者后面调用arccorner()函数,如
<script type="text/javascript">arccorner("top","normal");</script>
<div class="title">测试</div>
<div class="content">
测试测试测试测试测试测试测试测<br />
测试测试测试测试测试测试测试测<br />
测试测试测试测试测试测试测试测<br />
测试测试测试测试测试测试测试测<br />
</div>
<script type="text/javascript">arccorner("bottom");</script>

arccorner(pst[,dgr[,bgc[,bdc]]])提供四个参数,pst(position)指定 要实现圆角的位 置;dgr(degree)指定圆角的大小,省略此参数时使用默认值(5px),注意!如果需要使用后面的参数时,这个参数不能省略,否则程序会出错。解 决的方法是使用空值,即"" ,后面的 bgc 参数同样;bgc(background-color)指定背景色,默认值(#E5E5FF),注意使用该参数时不应该漏掉“#”符号,后面的 bdc 也一样;bdc(border-color)指定边框色,默认值(#3E556F)。

注意!!! 应该在页头加载程序文件 arccorner.js ,比如在 <head> 标记里加入此代码
<script type="text/javascript" src="arccorner.js"></script>
如果在 </html> 后面加载的话会没有效果!

pst参数可选值:
top    上面圆角
bottom   下面圆角
tl     左上角弧化
bl     左下角弧化
tr     右上角弧化
br     右下角弧化

dgr参数可选值:
normal/中圆角(5px)
big/大圆角(8px)
small/小圆角(2px)

bgc 与 bdc 参数为十六进制的 GRB 颜色值,如#000000为黑色,#FFFFFF为白色。

锐拜我开发此程序的目的在于经验分享与技术交流!若您有任何意见或者建议请 E-mail:rybby@163.com 联系锐拜。
程序名称:Arccorner(弧形角)
目前版本:v2.0
程序编辑:Rybby
下载地址:http://rybby.blog.hexun.com/35381241_d.html
程序交流讨论地址:http://rybby.blog.hexun.com/34232885_d.html

转载需知!如需转载本文,请在标题前加上“[转载]”,并在文章开头或结尾加上本文链接地址,谢谢!
生活因分享而快乐!欢迎转载。

0
0
分享到:
评论

相关推荐

    基于C++开发的WEB服务器,支持C/C++、Python、Java等多语言混合开发WEB应用

    基于C++开发的WEB服务器,支持C/C++、Python、Java等多语言混合开发WEB应用

    基于STM8单片机的TM1615七段数码管驱动(模拟I2C).zip

    基于STM8单片机的编程实例,可供参考学习使用,希望对你有所帮助

    基于STM8单片机的电位器输入控制继电器输出实验.zip

    基于STM8单片机的编程实例,可供参考学习使用,希望对你有所帮助

    网络安全CTF靶场之rce-labs

    该靶场仅供学习使用!

    python爬虫豆瓣电影TOP250,以及数据化分析程序源代码+数据

    电影详情链接 图片链接 影片中文名 影片外国名 评分 评价人数 概况 相关信息 https://movie.douban.com/subject/1292052/ https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg 肖申克的救赎   The Shawshank Redemption 9.7 2529468 希望让人自由 导演: 弗兰克·德拉邦特 Frank Darabont   主演: 蒂姆·罗宾斯 Tim Robbins ... 1994   美国   犯罪 剧情 https://movie.douban.com/subject/1291546/ https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.jpg 霸王别姬 9.6 1880353 风华绝代 导演: 陈凯歌 Kaige Chen   主演: 张国荣 Leslie Cheung 张丰毅 ........

    汽车中间件市场调研报告:2023年全球汽车中间件市场销售额达到了78亿美元

    汽车中间件市场调研报告:2023年全球汽车中间件市场销售额达到了78亿美元 在数字化转型的浪潮中,汽车中间件作为连接硬件与软件的关键桥梁,正引领着汽车行业的新一轮变革。随着全球汽车产业的快速发展,中间件市场规模持续扩大,展现出前所未有的增长潜力。然而,面对复杂多变的市场环境和不断涌现的新技术,企业如何精准把握市场脉搏,实现可持续发展?本文将深入探讨全球及中国汽车中间件市场的现状、趋势及竞争格局,为您揭示咨询的重要性。 市场概况: 根据QYResearch(恒州博智)的统计及预测,2023年全球汽车中间件市场销售额达到了78亿美元(约7803百万美元),预计2030年将达到156亿美元(约15630百万美元),年复合增长率(CAGR)为10.3%(2024-2030)。这一数据不仅彰显了中间件市场的强劲增长动力,也预示着未来巨大的市场空间。 技术创新与趋势: 随着自动驾驶、车联网等技术的不断发展,汽车中间件正面临着前所未有的技术挑战与机遇。新一代中间件需要具备更高的实时性、更低的延迟以及更强的数据处理能力,以满足复杂多变的汽车应用场景。同时,云计算、大数据、人工智能等技术的融合应用,将进

    python语言mp3pl爬虫程序代码QZQ.txt

    python语言mp3pl爬虫程序代码QZQ

    小语种字体TTF文件转PNG图片的方法

    # 小语种字体TTF文件转PNG图片的方法 ## 准备工作 1. 下载python3.9,推荐3.6~3.9,几个依赖包在这个版本运行的好。 2. 下载 FontForge-mingw-w64 ,可自行下载,或从文末打包好的工具包直接使用。 3. 下载需要导出的字体ttf文件,最好先装在本机系统上。 ## 导出方法 1. 把 `tts2png2.py` 文件复制到软件的bin目录下。 2. 修改 `tts2png2.py` 文件中的字体路径,注意Windows用双斜杠。 3. 从bin目录打开终端(管理员模式启动)。 4. 运行脚本 `./ffpython .\tts2png2.py`。

    26页-基于AI人工智能的智慧校园综合解决方案AI+智慧校园综合解决方案.pdf

    在21世纪的科技浪潮中,人工智能(AI)无疑是最为耀眼的明星之一,它以惊人的速度改变着我们的生活、工作乃至整个社会的运行方式。而在人工智能的广阔领域中,大模型(Large Models)的崛起更是开启了智能技术的新纪元,引领着AI向更加复杂、高效、智能的方向发展。本文将深入探讨人工智能大模型的内涵、技术特点、应用领域以及对未来的影响。 一、人工智能大模型的内涵 人工智能大模型,顾名思义,是指具有庞大参数规模和数据处理能力的AI模型。这些模型通过深度学习算法,在海量数据上进行训练,能够学习到丰富的知识表示和复杂的模式识别能力。与传统的小型或中型模型相比,大模型在理解自然语言、生成高质量内容、进行跨模态信息处理等方面展现出前所未有的优势。它们不仅能够执行特定的任务,如图像识别、语音识别,还能进行创造性的工作,如文本生成、音乐创作,甚至在某些情况下展现出接近或超越人类的智能水平。 二、技术特点 海量数据与高效训练:大模型依赖于庞大的数据集进行训练,这些数据涵盖了广泛的主题和情境,使得模型能够学习到丰富的语义信息和上下文理解能力。同时,高效的训练算法和硬件加速技术,如TPU(Tensor Processing Unit)和GPU,使得大规模模型的训练成为可能。 自注意力机制与Transformer架构:许多领先的大模型采用了Transformer架构,特别是其自注意力机制,这种设计使得模型在处理序列数据时能够捕捉到长距离依赖关系,极大地提高了模型的表达能力和泛化能力。 多任务学习与迁移学习:大模型通常具备多任务学习的能力,即在一次训练中同时学习多个任务,这有助于模型学习到更通用的知识表示。此外,迁移学习使得这些模型能够轻松适应新任务,只需少量额外数据或微调即可。

    下垂控制-基于T型三电平逆变器的下垂控制,电压电流双闭环,采用LCL滤波,SPWM调制方式 1.提供simulink仿真源文件 2.提供下垂控制原理与下垂系数计算方法 3.中点平衡控制,电压电流双闭环

    下垂控制-基于T型三电平逆变器的下垂控制,电压电流双闭环,采用LCL滤波,SPWM调制方式 1.提供simulink仿真源文件 2.提供下垂控制原理与下垂系数计算方法 3.中点平衡控制,电压电流双闭环控制 4.提供参考文献

    一个仿大众点评、美团的城市选择器,使用如同Rx一样优雅,并且UI和城市数据可以自定义.zip

    城市选择器一个仿大众点评的城市快速选择器, 最少只需 一行 代码即可启动城市选择器, 支持页面样式修改,多元化自定义截屏 版本日志V0.4.6优化地理位置设置时有时会设置不成功问题修复其他若干问题修改UI默认主题色V0.4.5修改设置位置信息方式,由之前必须在打开页面之前获取位置信息改为允许用户在打开页面后设置位置信息,具体使用方式见 Step3简化配置项,不需要在AndroidManifest中再注册Activity,并默认隐藏titlebarV0.4.3修复更新数据库表结构后第一次进入会闪退问题V0.4.0数据库表结构修改,增加了高德地图citycode设置gps城市的api略有改动见 Step3V0.3.3紧急修复一个可能导致内存泄漏问题优化提高滑动检索效率隐藏下拉刷新labelV0.3.1在搜索框后面添加一个清空搜索框按钮修复搜索框中输入空格会搜索出全部城市问题修复搜索结果弹出框中文字在不同theme下显示不同颜色问题,现在已统一为黑色其他调用时参数合法性校验V0.3.0简化api调用形式,修改为Rx形式,见操作步骤

    慢性病大数据分析处理.zip

    慢性病大数据分析处理慢性病项目

    Multisim单片机资源单片机C语言程序设计实训100例

    Multisim单片机资源单片机C语言程序设计实训100例提取方式是百度网盘分享地址

    PMSM永磁同步电机最大转矩电流比MTPA控制仿真,弱磁控制仿真,前馈补偿仿真程序,详细解析教程文档 这是一份非常完美的仿真文件及详细教程,从仿真效果图看转速、电流及转矩跟随非常稳定 该算法架构包

    PMSM永磁同步电机最大转矩电流比MTPA控制仿真,弱磁控制仿真,前馈补偿仿真程序,详细解析教程文档。 这是一份非常完美的仿真文件及详细教程,从仿真效果图看转速、电流及转矩跟随非常稳定。 该算法架构包含如下模块: 1)SVPWM矢量控制模块 2)转速环PI调节器、电流环PI调节器; 3)MTPA调节器; 4)弱磁控制器; 5)前馈补偿; 一份该仿真的算法说明文档,每一步都有详细介绍如何搭建,包括环路参数怎么算,拿来做毕设或者学习都很方便; 几篇参考文献; 一篇作者自己写的算法总结,让你少走弯路; 两个视频;

    手绘卡通儿童人物幼儿园教学课件模板.pptx

    手绘卡通儿童人物幼儿园教学课件模板

    Simulink电动汽车仿真模型(包含行驶阻力模型,工作模式切模型,驾驶员模型,PID控制模块等,NEDC,CLTC工况仿真结果)东西很全

    Simulink电动汽车仿真模型(包含行驶阻力模型,工作模式切模型,驾驶员模型,PID控制模块等,NEDC,CLTC工况仿真结果)东西很全

    2-Perfect Backup v3.3.0 全功能备份神器,支持多种备份方式,免费使用,可商用

    是一款全功能的备份软件,支持增量备份、差异备份、完全备份和同步备份,帮助用户轻松保护关键文件。支持多种存储选项,包括本地硬盘、USB驱动器、网络文件夹、云存储和 FTP 服务器等。 【使用方法】: 1. 下载并安装 Perfect Backup。 2. 打开软件,选择备份类型(增量、差异、完全或同步)。 3. 指定源文件和目标存储位置。 4. 设置备份计划,选择备份频率。 5. 点击“开始备份”,执行备份任务。

    基于STM8单片机的光敏电阻模拟量ADC输入(带中断).zip

    基于STM8单片机的编程实例,可供参考学习使用,希望对你有所帮助

    HTML5实现好看的创意房屋设计公司网页源码.zip

    资源描述: HTML5实现好看的创意房屋设计公司网页源码,好看的创意房屋设计公司网页源码,创意房屋设计公司网页源码模板,HTML创意房屋设计公司网页源码,内置酷炫的动画,界面干净整洁,页面主题,全方位介绍内容,可以拆分多个想要的页面,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。 资源使用: 点击 index.html 直接查看效果

Global site tag (gtag.js) - Google Analytics