CSS的9种边框类型和属性值.pdfVIP

  1. 1、本文档共4页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  5. 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  6. 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  7. 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  8. 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
CSS的9种边框类型和属性值

CSS的9种边框类型和属性值 CSS边框类型 在⽇常⽣活中,盒⼦都是由⼀定材质制成的,⽐如⽊质盒⼦和纸质盒⼦,在CSS 中盒 ⼦即边框也有很多 型,主要有以下9种 型,如下表所⽰: 为了⽅便理解,使⽤Dreamweaver CS6制作实例: 1、新建HTML⽂件,设置标题为“边框实例” 2、在body标签中输⼊如下代码: 注意:加⼊color属性和br标签可以更⽅便地查看到每种 型边框的实际效果。 运⾏结果如下图所⽰: 属性值的简写样式 在border 中有三种属性,分别是宽度、样式、颜⾊,并且有四个“⾯” ,分别是border- right ,border-bottom ,border-le t 。根据实际需要我们可以可以给这四个“⾯” 同时制定 或分别制定、制定其中的⼀个或⼏个样式。假如我们要给4个边框都制定同样样式, 每个属性都写⼀⾏代码,需要写12⾏,这样⼀来就显得很⿇烦,在实际中CSS提供了 简写⽅式,减少不必要的代码书写。 (1)所有的边框使⽤同⼀样式,代码如下所⽰: Border:2px red solid; /*设置边框的样式*/ 这⾏代码设置四个边框的宽度为2px ,颜⾊为红⾊,颜⾊为实线。 (2 )对不同边框设置不同的属性值,代码如下所⽰: 从这三⾏代码可以知道,4个边框属性设置,可以指定2、3或4个属性值,它们有各⾃ 不同的意义。 2个指定值意义:第⼀个值为上下边框属性赋值,第⼆个值为左右边框属性赋值。 3个指定值的意义:第⼀个值为上边框属性赋值,第⼆个值为左右边框属性赋值,第 三个值为下边框属性赋值。 4个指定值的意义:第⼀值为上边框属性赋值,第⼆个值为右边框属性赋值,第三个 值为下边框属性赋值,第四个值为左边框赋值。 那么上述代码的意思就是为上下边框颜⾊设为红⾊,左右边框颜⾊设为蓝⾊;上下框 宽度设为2px ;左右边框设为3px ;下边框设为4px ;上边框样为点线式,右边框为破 折线式,下边框为实线式,左边框为双线式。运⾏效果如下图所⽰: (3 )为某⼀边框设不同值。 也可以在设定统⼀值后,再为其中⼀个边框设定不同的值,代码如下: 根据CSS的代码执⾏顺序,可以知道,第⼀⾏设定的border-top 的效果将被第⼆⾏设定 的效果取代。 边框与背景 在边框中还有需要注意的地⽅,就是边框与背景颜⾊同时出现的情况下,在不同浏览 器中浏览可能会有细微差别。⽐如在IE 中,边框不显⽰背景颜⾊,⽽在Fire ox 中,边 框也能被背景颜⾊填充。 W3Cschool ()最⼤的技术知识分享与学习平台 篇内容来⾃于⽹站⽤户上传并发布。

文档评论(0)

wnqwwy20 + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

版权声明书
用户编号:7014141164000003

1亿VIP精品文档

相关文档