- 1、本文档共4页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 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 ()最⼤的技术知识分享与学习平台
篇内容来⾃于⽹站⽤户上传并发布。
您可能关注的文档
- Chap05_图像分割(下).pdf
- chap10逻辑备份与恢复.ppt
- chap2 基本数据类型与运算.ppt
- chap6二维变换及二维观察.pdf
- chapter 9 静电场-电势 3.pdf
- Chapter A-J2EE介绍.ppt
- CHAR04顺序结构.pdf
- CIRISPR系统背景.pdf
- Cisco 7600系列SPA接口处理器SIP-600.pdf
- CISCO IOS的基本操作.pdf
- 地理-内蒙古锡林郭勒盟2023~2024学年第一学期高三年级全盟统考试题和答案.docx
- 历史|湖北元月调考暨湖北省部分市州元月高三期末联考历史试卷及答案.docx
- 历史-内蒙古锡林郭勒盟2023~2024学年第一学期高三年级全盟统考试题和答案.docx
- 数学(理科)-内蒙古锡林郭勒盟2023~2024学年第一学期高三年级全盟统考试题和答案.docx
- 历史丨金太阳24~239C湖北省十堰市2024届高三上学期1月调研考试历史试卷及答案.docx
- 青岛某高层办公楼地下防水施工方案(sbs卷材).docx
- 土木工程实习报告表格.doc
- 工程流体力学教学课件ppt作者闻建龙工程流体力学习题答案部分.doc
- 围手术期管理制度(1)_0.doc
- 2023年公务员多省联考《申论》题(内蒙古旗县卷)及参考答案.doc
1亿VIP精品文档
相关文档
最近下载
- 分数的产生和意义完整版课件.ppt
- 患者体位摆放管理.ppt
- 2024年全国版图知识竞赛(中小学组)试题汇总(附解析).pdf VIP
- 2024年湖北省八市高三(3月)联考思想政治试卷(含答案).docx
- 2024年天津市专业技术人员继续教育公需课考试题+答案(四套全).pdf VIP
- 青少年冒险问卷-冒险行为量表.docx VIP
- Unit 6 Topic 3 Section C 示范公开课教学课件【七年级英语下册仁爱版】.pptx VIP
- 茶道茶文化宣传PPT模板.pptx
- KTS442全站仪说明书.pdf
- Unit 6 Topic 1 Section C 示范公开课教学课件【七年级英语下册仁爱版】.pptx VIP
文档评论(0)