来一发CSS完成相对的完善圆角框

只看该作者 · 发表于 2015-1-16 00:01:33

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

所有的设计第一步就是构思，构思好了。
破洛洛文章简介：本文切磋的是圆角框的最终办理计划，其中心关头词是“油滑、完善、兼容、重用性、语义”，这些手艺都是搜集今朝收集上最盛行的做法。纵不雅各种办法，各有其上风，请针对分歧的情况分离利用。
导言：
本文切磋的是圆角框的最终办理计划，其中心关头词是“油滑、完善、兼容、重用性、语义”，这些手艺都是搜集今朝收集上最盛行的做法。纵不雅各种办法，各有其上风，请针对分歧的情况分离利用。
圆角框，由于其款式比直角框大度，以是成为计划师心中偏幸的计划元素。如今的web尺度下大批的网页、博客都接纳圆角框计划，成为一道亮丽的光景线。
但是，就是这个圆角，却成了网页前端职员心中永久抹之不往的暗影，对它，能够说是又痛又爱。爱的是它的大度，痛的是要让它兼容通行于各类分歧的扫瞄器却成为一个永久的神话。
让我们往返顾一下今朝收集盛行的都有哪些办理计划。
第一种：无图片纯CSS圆角框
收录来由：兼容性强，不必图形

登录/注册后可看大图

图一

特性：

不必任何图形，利用良多个div容器摹拟出圆角效果。
兼容性：通杀一切扫瞄器

弱点：

机关这个圆角必要到场太多的无语义的标签，布局对照冗余。
重用性不强：假如一个页面有多个圆角，而且要完成分歧的半径巨细，则其天真性不敷。
边框色彩固然能够调治，但会对页面中的布局发生致命的影响，合用于色采单一而且一个页面中圆角使用未几的页面。
不简单完成圆弧内有突变色的图形背景。
圆角框不敷油滑，有锯齿征象，合适于背景致和以后色色差不年夜而且圆弧较小的网页。

完成道理：
用良多1像素高的div容器，使用背景致和边框色来摹拟出圆角框的表面线。
实例演示：http://www.cssplay.co.uk/boxes/snazzy.html
第二种：无图片纯css圆角框，用特别字符（&bull）
收录来由：油滑，不必图形

登录/注册后可看大图

图二

特性：

不必任何图形，利用特别字符•（圆点）摹拟出圆角。
兼容性：通杀一切扫瞄器
圆角光滑

弱点：

机关这个圆角一样必要到场无语义的标签，布局冗余，同第一种一样。
重用性不强：假如一个页面有多个圆角，而且要完成分歧的半径巨细，必要调剂四个角图片的定位，而且字符巨细对其有影响，天真性不敷。
色彩虽可调治，但请求内里的背景致和字符的色彩不异，不克不及做成边框线条。合用于色采单一而且一个页面中圆角不是太多的页面。
一样不简单完成圆弧内有突变色的图形背景。

完成道理：
用特别字符（&bull），使用定位，截取四分之一圆摹拟出圆角框的一个角图片。
实例演示：http://www.cssplay.co.uk/boxes/curves.html

破洛洛文章简介：本文切磋的是圆角框的最终办理计划，其中心关头词是“油滑、完善、兼容、重用性、语义”，这些手艺都是搜集今朝收集上最盛行的做法。纵不雅各种办法，各有其上风，请针对分歧的情况分离利用。

第三种：图片圆角框
收录来由：兼容性强，能够体现很庞大的圆角效果。

登录/注册后可看大图

图三

特性：

利用四个圆角图形（或一个圆图片）。
兼容性：通杀一切扫瞄器。
这是最经常使用的圆角框做法。
由于接纳图片来体现，以是其圆角是超等光滑，无任何锯齿征象。
体现丰厚，合用于各类对图片体现请求较高的圆角框。

弱点：

机关这个圆角也必要到场四个标签来装四张角图片，布局也有冗余。
重用性不强：假如一个页面有多个圆角，而且要完成分歧的半径巨细，则要从头制造一套圆角图片。
假如对布局的冗余没有出格的需求，这就是超等油滑圆角框的办理计划了。
完成道理：

使用九宫格道理，在一个容器的四个角到场相对定位（或绝对定位）的四张圆角图片。
实例演示：http://www.cssplay.co.uk/boxes/three_cornered.html
第四种：使用VML绘制圆角（ieonly）
收录来由：无图片，光滑，可加暗影边框

登录/注册后可看大图

图四

特性：

不必任何图形。
兼容性：只能在IE中利用
圆角半径随便调剂
重用性强：多个圆角恣意挪用。
圆角色彩随便设置。
布局无冗余。
圆角光滑无锯齿。

弱点：

除兼容性有成绩外，别的方面的体现都不错。
不克不及在圆弧中体现丰厚的有突变的图片，由于圆弧外框是通明的。

完成道理：利用IE公用的VML来画出圆角。
<v:roundrect
id="roundbox"
class="circle"
strokecolor="red"
strokeweight="2px"
arcsize="0.08">
</v:roundrect>
注重到场援用空间：
<htmlxmlns:vxmlns="http://www.w3.org/1999/xhtml">
这是兼容的用法，
xmlns:v一不克不及少，不然。。。
款式表中到场这一句话：
v":*{behavior:url(#default#VML);display:inline-block;}
Arcsize为半径
Strokeweight为边框线宽度
Strokecolor为边框线的色彩
实例演示：（请在IE系列扫瞄器下检察本实例)
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns:vxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>VML画光滑圆角框</title><style>v:*{behavior:url(#default#VML);display:inline-block;}body{background-color:#99FFFF;font-size:12px;}.circle{height:130px;width:300px;padding-top:8px;margin:0pxauto;z-index:2;margin-left:340px;}h1{border-bottom:2pxredsolid;font-size:12px;margin:4px;text-indent:1em;height:20px;}div{font-size:12px;padding:10px;}</style></head><body><v:roundrectid="roundbox"class="circle"strokecolor="red"strokeweight="2px"arcsize="0.08"><h1>VML画光滑圆角</h1><divclass="t1">利用IE公用的VML来画光滑圆角框，还能够画出暗影效果。就其图形体现来讲，长短常完善的。</div><v:shadowon="t"color="#777"opacity="52428f"offset="1.5pt,1.5pt"/></v:roundrect></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

破洛洛文章简介：本文切磋的是圆角框的最终办理计划，其中心关头词是“油滑、完善、兼容、重用性、语义”，这些手艺都是搜集今朝收集上最盛行的做法。纵不雅各种办法，各有其上风，请针对分歧的情况分离利用。

第五种：使用公有属性绘制圆角（FF3only）
收录来由：光滑无锯齿

登录/注册后可看大图

图五

特性：

不必任何图形。
兼容性：只能在FF3中利用，别的扫瞄器不受撑持。
圆角半径随便调剂
重用性强：多个圆角恣意挪用，只必要款式表设置就能够。
圆角色彩随便设置。
布局无冗余。
圆角光滑无锯齿。

弱点：

除兼容性有成绩外，别的方面的体现都不错，这类体例应当是最完善的体例，惋惜今朝只要FF3能撑持这个属性，今后CSS3后会撑持这个属性，不外这不晓得要比及几年今后。
同第五种圆角一样，在处置圆弧内的图片背景时显得有些故意有力。

完成道理：

利用FF3公用的公有属性来画出圆角。
只用两种属性就可以表现油滑的圆角框
-moz-border-radius:10px;/*圆角半径*/
Border:5pxredsolid;/*边框巨细*/

实例演示：（请在FF3扫瞄器下寓目，别的扫瞄器不撑持）

运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>FF3下的圆角框</title><styletype="text/css">body{background:#CCCCCC;}.round{-moz-border-radius:20px;/*半径*/border:4pxsolid#333;/*边框宽度*/margin:50pxauto;width:30%;height:150px;font-size:12px;}h1{border-bottom:4px#333solid;font-size:12px;width:100%;padding:5px0;text-indent:1em;}.context{font-size:12px;padding:10px;}</style></head><body><divclass="round"><h1>FF3公有属性画的圆角框</h1><divclass="context"><p>FF3下的圆角框两个属性就能够办理:</p><p>-moz-border-radius：半径</p><p>border：边框</p></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

第六种：无图片剧本圆角框（js半完善办理计划）

这类计划今朝应当是对照完善的计划了。

登录/注册后可看大图

图六

特性：

不必任何图形。
兼容性：通杀一切扫瞄器
圆角半径随便调剂
重用性强：多个圆角恣意挪用。
色彩随便设置，而且可使用庞大的图片做为背景，体现丰厚。
布局无冗余，只必要在容器上界说一个class或ID就能够将这个div酿成圆角。
圆角光滑。

弱点：

客户端禁用JS时就无圆角，不外在今朝形式下，这类情形应当不会成为太年夜的成绩。

实例演示：http://www.curvycorners.net/examples.php（有三个演示例子）

结语：

今朝的css由于不克不及为一个容器中界说多张背景图片，形成了为了这类圆角效果而到场冗余标签。传闻CSS3会引进这一属性，大概到哪时，就是圆角框一致的时分了。别的也传闻在CSS3中成心向到场像FF3公有属性（-moz-border-radius）的办法，这也能够完善地办理这个成绩。但在今朝的形式下，大概也只要用下面的这些办法来过渡了，激烈等候CSS3的到来。

总而言之：要完成相对的完善圆角框在今朝的情势下基础上是不成能的，以是取名为“半完善办理计划”。

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。

只看该作者 · 发表于 2015-1-17 23:52:46

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-1-26 23:50:41

滚动条)层属性--溢出(visible/hidden/scroll/auto)

只看该作者 · 发表于 2015-2-5 04:59:03

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-2-11 06:19:44

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-3-1 23:54:35

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-3-11 02:36:44

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-3-17 20:07:11

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-3-24 23:38:50

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发CSS完成相对的完善圆角框

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子