可自由扩展的圆角矩形制作方法

转自:http://golen.blog.sohu.com/96114249.html

制作一个好的web标准站点,扩展性要多考虑,扩展性做的好的网站,会给后期的维护和升级会带来很大的方便.
现在总结一下我做web以来,可扩展的圆角矩形的制作方法:

方法一:


命名:round.gif:


代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圆角矩形的制作方法</title>
<style>
* { font-size:12px}
.roundbox{
position:relative;
border:1px solid #6d298e;
width:400px; /* 根据需要可改变不同的宽度 */
padding:8px;
line-height:22px
}
.roundbox span{
display:block;
position:absolute;
width:5px;
height:5px;
font-size:0
}
.top_left{
left:-1px;
top:-1px;
background:url(round.gif) top left
}

.top_right{
right:-1px;
top:-1px;
background:url(round.gif) top right;
}
.bottom_left {
left:-1px;
bottom:-1px;
background:url(round.gif) bottom left;
}

.bottom_right {
right:-1px;
bottom:-1px;
background:url(round.gif) bottom right;
}
</style>
</head>

<body>
<div class="roundbox">
 
<span class="top_left"></span>
<span class="top_right"></span>
<span class="bottom_left"></span>
<span class="bottom_right"></span>
这里是一个宽416px的圆角矩形,这里是一个宽416px的圆角矩形,这里是一个宽416px的圆角矩形,这里是一个宽416px的圆角矩形,这里是一个宽416px的圆角矩形
</div>
</body>
</html>

ps:1.css中font-size:0主要是解决IE6.0下的一个bug;
   2.我个人比较赞同这种做法.方法一的扩展性做的很好,代码也简洁明了.

方法二:

1.在PS中画一个足够大的圆角矩形(我这里画的是660*339相素,其实还是小了点)
命名:bground.gif


代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圆角矩形的制作方法</title>
<style>
* { font-size:12px}
.c,.c i,.c i i,.c b,.c b b,.c p{ background:url(bground.gif) no-repeat
}
.c{
width:200px;/* 根据需要可改变不同的宽度 */
background-position:0 -4px;
}
.c i{
display:block;
height:4px;
font-size:0
}
.c i i{
margin:0 0 0 4px;
background-position:right 0;
}
.c b{
display:block;
height:4px;
background-position:0 bottom;
font-size:0
}
.c b b{
margin:0 0 0 4px;
background-position:right bottom;
}
.c p{
margin:0 0 0 4px;
padding:8px;
background-position:right -4px;
line-height:22px
}

</style>
</head>

<body>
<div class="c">
<i><i></i></i>
<p>
这里是一个宽216px的圆角矩形,这里是一个宽216px的圆角矩形,这里是一个宽216px的圆角矩形,这里是一个宽216px的圆角矩形,
</p>
<b><b></b></b>
</div>

</body>
</html>

ps:这种方法缺点是多了一些无意义的标签,好象在web标准中也不大赞同用<i>这样的标签.

分别预览:

方法三:

纯粹用css代码来实现圆角,不需要用图片.

代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
* { font-size:12px}
.roundbox { width:400px /* 根据需要可改变不同的宽度 */}
.roundbox div { padding:8px; border-left:1px solid #6d298e; border-right:1px solid #6d298e}
.r {border-right:1px solid #6d298e;border-left:1px solid #6d298e;height:1px;font-size:1px;overflow:hidden;display:block;}
.a1 {margin:0 5px; background:#6d298e;}
.a2 {margin:0 3px; border-right-width:2px; border-left-width:2px;}
.a3 {margin:0 2px;}
.a4 {margin:0 1px; height:2px;}
.a5 {height:auto;font-size:medium;}
</style>
</head>

<body>
<div class="roundbox">
   <b class="r a1"></b><b class="r a2"></b><b class="r a3"></b><b class="r a4"></b>
   <div>这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,这里是一个宽400px的圆角矩形,</div>
   <b class="r a4"></b><b class="r a3"></b><b class="r a2"></b><b class="r a1"></b>
</div>
</body>
</html>

预览:

PS:圆角的地方似乎并不圆滑,而且拐角的弧度也不好控制,感觉这种方法没前两种方法好.

转载于:https://www.cnblogs.com/luoyanli/archive/2013/06/06/3121228.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/494059.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GE刚刚换帅,就向艾默生出售智能平台业务?刚刚换帅,GE又向艾默生出售智能平台业务,未来究竟何去何从?...

来源&#xff1a;路透社、知识自动化等物联网智库 整理发布摘要&#xff1a;智能平台出售背后&#xff0c;GE和艾默生各自有何打算&#xff1f;GE多事之秋能否迎来回春转机&#xff1f;昨晚&#xff0c;据消息&#xff1a;艾默生电气公司(Emerson Electric)同意收购通用电气&am…

豆瓣加载动画实现

最终效果如下 ValueAnimator类API 简介 ofFloat(float… values) 构建ValueAnimator&#xff0c;设置动画的浮点值&#xff0c;需要设置2个以上的值setDuration(long duration) 设置动画时长&#xff0c;默认的持续时间为300毫秒。setInterpolator(TimeInterpolator value) 设…

下一次 IT 变革:边缘计算(Edge computing)

来源&#xff1a;云头条摘要&#xff1a;外媒 ZDnet 发布了此篇边缘计算领域的重要文章&#xff0c;详细分析了各机构不同的定义、市场状况、前景等&#xff0c;经编译&#xff0c;供各位参考数十亿物联网设备和5G网络这两股力量必将推动计算工作负载的部署方式发生深远而重大的…

WebService入门

webservice 的概念&#xff0c;解决什么问题&#xff1f; webservice 就是一个应用程序&#xff0c;它提供一种通过web 方式访问的api. 解决两个系统或者&#xff08;应用程序&#xff09;之间的远程调用….. 调用是跨语言&#xff0c;跨平台… webservice 最基本的组成部分…

Google联手Facebook 要在AI研究上搞什么大事?

来源&#xff1a;网易智能 摘要&#xff1a;Google和Facebook宣布&#xff0c;使开源机器学习框架PyTorch与Tensor-Processing Units&#xff08;TPU&#xff09;进行合作。这种伙伴关系标志着人工智能研究合作进入新时代。“今天&#xff0c;我们很高兴地宣布&#xff0c;Goog…

WebService之CXF框架

本文主要包括以下内容 ant工具的使用利用cxf实现webservicecxf与spring整合 ajax访问webservice ant 工具 1、为什么要用到ant这个工具呢&#xff1f; Ant做为一种工具已经广泛被使用&#xff0c;并且历史悠久。 使用ant的内置命令&#xff0c;可以编译java源文件(javac)…

Java之IO操作总结

所谓IO&#xff0c;也就是Input与Output的缩写。在java中&#xff0c;IO涉及的范围比较大&#xff0c;这里主要讨论针对文件内容的读写 其他知识点将放置后续章节 对于文件内容的操作主要分为两大类 分别是&#xff1a; 字符流字节流 其中&#xff0c;字符流有两个抽象类&…

谷歌无人车离奇车祸曝光:人类安全员睡着后,误触关闭了自动驾驶

来源&#xff1a;量子位离奇&#xff0c;真离奇。一场已经被掩盖数月的谷歌无人车&#xff08;Waymo&#xff09;离奇车祸&#xff0c;刚刚被The Information曝光。车祸的发生地&#xff0c;就在距离谷歌加州山景城总部不远的高速公路上。那是一个六月的早晨。一辆Waymo无人车正…

强烈推荐:240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) &#xff0c;这是其它的 js 库所不及的&#xff0c;它兼容 CSS3&#xff0c;还兼容各种浏览器&#xff08;IE 6.0, FF 1.5, Safari 2.…

揭秘|超乎想象!未来50年将出现的九大黑科技……

来源&#xff1a;世界科技创新论坛Insititute for the Future是一家专门做预测的研究机构。该机构的首席研究总监Mark Frauenfelder详细描述了人类在未来能够用上&#xff0c;而今天却仍被认为不可能发生的事物。赶快一起来看看这些未来将出现的黑科技吧。1、大脑移植&#xff…

Android手绘效果实现

效果图 原理 大概介绍一下实现原理。首先你得有一张图&#xff08;废话~&#xff09;,接下来就是把这张图的轮廓提取出来&#xff0c;轮廓提取算法有很多&#xff0c;本人不是搞图像处理的&#xff0c;对图像处理感兴趣的童鞋可以查看相关资料。如果你有好的轮廓提取算法&…

干货|120页精华PPT详解工业机器人本体设计运算及仿真

来源&#xff1a;哈尔滨工业大学摘要&#xff1a;120页精华PPT详解工业机器人本体设计运算及仿真未来智能实验室是人工智能学家与科学院相关机构联合成立的人工智能&#xff0c;互联网和脑科学交叉研究机构。未来智能实验室的主要工作包括&#xff1a;建立AI智能系统智商评测体…

环信SDK集成

利用环信SDK可以实现即时通讯&#xff0c;但在集成的过程中碰到了不少的坑。 注意 选择项目路径&#xff0c;这里以最新版环信demo为例 注意&#xff1a;环信的ChatDemoUI这个demo里边因为研发的同事为了照顾老版本的AndroidStudio使用者&#xff0c;已经用eclipse生成了bui…

协作机器人先驱宣布倒闭!累计融资10.3亿元,贝佐斯投资八轮

来源&#xff1a;量子位一家机器人领域的头部玩家&#xff0c;还不是说倒下就倒下了。上个月&#xff0c;协作机器人的先驱Rethink Robotics刚刚宣布出售第2500个机器人产品&#xff0c;而昨天&#xff0c;就又宣布关门大吉了。CEO Scott Eckert在接受外媒The Robot Report采访…

YOLOv8改进 | 2023注意力篇 | MSDA多尺度空洞注意力(附多位置添加教程)

一、本文介绍 本文给大家带来的改进机制是MSDA&#xff08;多尺度空洞注意力&#xff09;发表于今年的中科院一区(算是国内计算机领域的最高期刊了)&#xff0c;其全称是"DilateFormer: Multi-Scale Dilated Transformer for Visual Recognition"。MSDA的主要思想是…

贝索斯专访:亚马逊帝国大规模业务转型的秘诀

来源&#xff1a;机器之能摘要&#xff1a;这篇文章简明、清晰地揭示出这家似乎没有边界、无拘束公司成功「转身」背后的逻辑与秘诀。与美国的其它科技业巨头不同&#xff0c;亚马逊并没有一个总的企业园区。在其全球的 57.5 万名雇员中&#xff0c;有 4.5 万名员工和管理人员位…

2018及过去20年诺贝尔化学奖获奖者及其贡献!

来源&#xff1a;科学网摘要&#xff1a;2018及过去20年诺贝尔化学奖获奖者及其贡献&#xff01;2018年诺贝尔化学获的获得者为美国科学家Frances H. Arnold, George P. Smith和英国科学家George P.Winter&#xff0c;他们利用进化的力量为人类造福。获奖的内容分别是研究酶的定…

RxJava学习入门

RxJava是什么 一个词&#xff1a;异步。 RxJava 在 GitHub 主页上的自我介绍是 “a library for composing asynchronous and event-based programs using observable sequences for the Java VM”&#xff08;一个在 Java VM 上使用可观测的序列来组成异步的、基于事件的程序…

解读2018年诺贝尔化学奖成果:用进化的力量解决化学问题

来源&#xff1a;新华网摘要&#xff1a;新华社斯德哥尔摩&#xff11;&#xff10;月&#xff13;日电 科普&#xff1a;用进化的力量解决化学问题——解读&#xff12;&#xff10;&#xff11;&#xff18;年诺贝尔化学奖成果地球的生命经过长期进化最终获得强大的适应力&am…

在win8下安装使用java及在win8下部署java环境变量-图文

为了反编译APK&#xff0c;不得不安装一些Androidfby、apktool1.4.1、dex2jar-0.0.9.9等&#xff0c;甚至连DW也安装了&#xff0c;但是我的电脑是win8X64的&#xff0c;也就是64位的win8系统&#xff0c;这就有点头疼了&#xff0c;出现了&#xff1a; 不是内部或外部命令&…