仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1072|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 带来一篇CSS3的border-radius属性界说HTML元素的圆角

[复制链接]
飘飘悠悠 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:06:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
秦歌(YanKaven)的站点:http://dancewithnet.com/
两年前宣布的《ThevisualdesignofWeb2.0》中提到“Roundedeverything”,圆角因令人感到温馨的友爱作风而变得无处不在。这个无处不在也让良多前端工程师累个半逝世,YAHOOPerformanceResearchEngneerTeam的Nicole在报告《DesigningFastWebsites》顶用的副题目是don’tblametheroundedcorners!,从正面也申明了圆角给完成者带来的困扰:完成贫苦、兼容坚苦、功能欠安。而W3C早在2002年的CSS3草案中就到场了一个叫border-radius的属性,经由过程它能够间接来界说HTML元素的圆角。
CSS3的border-radius标准
最新草案中其次要信息以下:

  • 属性:
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-right-radius
    border-bottom-right-radius
    值:<length><length>?。它们分离是界说角外形的四分之一椭圆的两个半径。如图:

    • 第一个值是程度半径。
    • 假如第二个值省略,则它即是第一个值,这时候这个角就是一个四分之一圆角。
    • 假如恣意一个值为0,则这个角是矩形,不会是圆的。
    • 值不同意是负值。

  • 属性:border-radius。它是下面四个属性值的简写。
    值:<length>{1,4}[/<length>{1,4}]?

    • 假如斜线前后的值都存在,那末斜线前的值设置程度半径,且斜线后的值设置垂直半径。假如没有斜线,则程度半径和垂直半径相称。
    • 四个值是依照top-left、top-right、bottom-right、bottom-left的按次来设置的。假如bottom-left省略,那末它即是top-right。假如bottom-right省略,那末它即是top-left。假如top-right省略,那末它即是top-left。

  • 使用局限:一切的元素,除table的款式属性border-collapse是collapse时
  • 内边半径即是外边半径减往对应边的厚度。当这个了局是负值时,内边半径是0。以是表里边曲线的圆心其实不必定是分歧的。
  • border-radius也会招致该元素的背景也是圆的,即便border是none。假如background-clip是padding-box,则背景(background)会被曲线的内边裁剪。假如是border-box则被外边裁剪。border和padding界说的地区也一样会被曲线裁剪。
  • 一切的边框款式(solid、dotted、inset等)都依照角的曲线。假如设置了border-image,则曲线之外的部分会被裁剪失落。
  • 假如角的两个相邻边有分歧的宽度,那末这个角将会从宽的边光滑过分到窄的边。个中一条边乃至能够是0。
  • 两条相邻边色彩和款式变化的中央点是在一个和双方宽度成反比的角上。好比,两条边宽度不异,这个点就是一个45
柔情似水 该用户已被删除
沙发
发表于 2015-1-18 05:15:23 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
只想知道 该用户已被删除
板凳
发表于 2015-1-25 23:27:32 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
再见西城 该用户已被删除
地板
发表于 2015-2-4 13:52:23 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
谁可相欹 该用户已被删除
5#
发表于 2015-2-10 01:36:06 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
活着的死人 该用户已被删除
6#
发表于 2015-2-28 15:39:03 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
因胸联盟 该用户已被删除
7#
发表于 2015-3-10 04:27:13 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
8#
发表于 2015-3-17 05:09:05 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
不帅 该用户已被删除
9#
发表于 2015-3-23 22:36:52 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 20:22

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表