博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图解 CSS (2): border - 边框
阅读量:6243 次
发布时间:2019-06-22

本文共 1119 字,大约阅读时间需要 3 分钟。

  hot3.png

样式表可以是外部的、内联的、嵌入的、链接的, 譬如下面的内联样式将作用于所有 ID=Test 的标签:

borderborder-widthborder-styleborder-colorborder-topborder-top-widthborder-top-styleborder-top-colorborder-bottomborder-bottom-widthborder-bottom-styleborder-bottom-colorborder-leftborder-left-widthborder-left-styleborder-left-colorborder-rightborder-right-widthborder-right-styleborder-right-colorborder-collapseborder-spacing
border: 宽度 样式 颜色;
26153129_HpTI.png

border 的宽度有三个常数值: medium(默认)、thick(粗)、thin(细).
26153129_lClh.png
26153129_611e.png
26153129_PUB2.png

自定义宽度最麻烦的就是宽度的单位(in、cm、mm、em、ex、pt、pc、px), 我喜欢用像素(px).
26153130_vg7C.png

border 的样式: none(默认)、solid、double、dotted、dashed、groove、ridge、inset、outset.
26153130_DZiv.png
26153130_pq8m.png
26153130_90Je.png
26153130_4Evv.png
26153130_nVmJ.png
26153130_uQOH.png
26153130_MDlx.png
26153130_pAsf.png
26153130_EhnL.png

后四种 3D 样式, 如果使用默认的 3D 着色颜色效果会更好:
26153130_3JxZ.png
26153130_vO6I.png
26153130_n7Mh.png
26153130_XMCm.png

指定颜色有五种方法(譬如蓝色): RGB(0,0,255); #0000FF; #00F; Blue; RGB(0,0,100%).
26153130_fVIi.png
26153130_3vU7.png
26153130_sCuV.png
26153130_JT5D.png
26153131_duHT.png

border: 宽度 样式 颜色; 可以从后向前省略, 也可以用 border-width、border-style、border-color 分开表达.
26153131_xrIB.png

可以用 border-top、border-bottom、border-left、border-right 分别描述四个边;
并可用 border-top-width、border-top-style、border-top-color 等描述各边的: 宽度、样式、颜色.
26153131_FW1j.png

上面列出的边框相关的样式还有: border-collapse、border-spacing; 这是表格相关的.
border-collapse 有两个常数值: collapse、separate, 决定边框是否分开:
26153131_bc8m.png
26153131_AOKQ.png

border-spacing: 用来设置表格中单元格的间距; 这个好像 IE(8) 不支持, 不过这和表格的 cellspacing 属性是一样的.

转载于:https://my.oschina.net/hermer/blog/319416

你可能感兴趣的文章
爱立信高通中兴等成立Avanci专利授权平台 旨在加速物联网发展
查看>>
美情报公司:勒索病毒WannaCry的创作者可能是中国人
查看>>
华科技:以市场为导向 以用户体验为标准
查看>>
诺基亚携手Facebook联合开展跨大西洋现场测试
查看>>
如何检查MySQL数据库的主从延时?
查看>>
红炜:改变光伏电站融资难也需水到渠成
查看>>
三星用户迎利好 三星将推月度安全更新
查看>>
网络时代安全问题凸显 互联网金融如何有效避开痛点?
查看>>
移动OA如何治愈外出办公“焦虑症”?
查看>>
电信运营商解决方案
查看>>
日本显示屏公司的尴尬:夏普被收购 JDI也岌岌可危
查看>>
[MySQL 5.7]:binlog --statement
查看>>
MicroProfile变成了Eclipse MicroProfile
查看>>
中国电信10G PON演进研究成果卓著:为现网升级铺平道路 加速千兆时代到来
查看>>
家庭宽带市场竞争分析
查看>>
台媒:手机应用和免费wifi可瞬间泄露隐私
查看>>
QUnit单元测试文档
查看>>
手机网络电话(VOIP)大比拼
查看>>
华天动力OA系统全国渠道布局 20个城市分公司初露端倪
查看>>
我市智慧城市建设迈入快车道
查看>>