深山老林
来源: BlogBus 原始链接: http://forest.blogbus.com:80/logs/2006/11/3836475.html 存档链接: https://web.archive.org/web/20061116235230id_/http://forest.blogbus.com:80/logs/2006/11/3836475.html 作者: lovej1bz(at)gmail.com,风的影子
深山老林 FORESt.blOGbUS.com 生活随笔，记下生命中的脚印！ 导行菜单 2006-11-15 [原]边框样式的写法总结 TAG： 经验之谈 CSS 原创 今天在群（CSS森林:30247792）里讨论了border的样式写法，发现border的写法还真是灵活，做了一下总结，希望对大家有用： border : border-width || border-style || border-color border是一个复合的属性，它可以同时定义上右下左四个边框，当四个边都是同个样式时可以使用，如： =================CSS================= border:1px solid #FF00FF。
这是最简单的应用，如果四个边的样式不是相同的怎办？一般会有下面几种情况，写法差不多： ===============CSS=================== /边框样式、宽度、颜色都不同/ .div1{ border-top:1px solid #FF00FF; border-right:2px solid #0000FF; border-bottom:1px double #FF00FF; border-left:1px solid #FF0000; } .div2{ border-width:1px 2px 1px 1px; border-style:solid solid double solid; border-color:#FF00FF #0000FF #FF00FF #FF0000; } /边框样式不同/ .div1{ border-top:1px solid #FF00FF; border-right:1px solid #FF00FF; border-bottom:1px double #FF00FF; border-left:1px solid #FF00FF; } .div2{ border:1px #FF00FF; border-style:solid solid double solid; } /边框宽度不同/ .div1{ border-top:1px solid #FF00FF; border-right:2px solid #FF00FF; border-bottom:1px solid #FF00FF; border-left:1px solid #FF00FF; } .div2{ border-width:1px 2px 1px 1px; border:solid #FF00FF; } /边框颜色不同/ .div1{ border-top:1px solid #FF00FF; border-right:1px solid #0000FF; border-bottom:1px solid #FF00FF; border-left:1px solid #FF0000; } .div2{ border:1px solid; border-color:#FF00FF #0000FF #FF00FF #FF0000; }
还有就是有些边框是没有的，比如只有底边： ================CSS================== .div1{ /错误的/ border:none; border-bottom:1px solids #FF00FF; } .div2{ border:1px #FF00FF; border-style:none solid none; }
注意： 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。 如果只提供一个，将用于全部的四条边。 如果提供两个，第一个用于上－下，第二个用于左－右。 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 TrackBack URL: http://www.blogbus.com/public/tb.php/3836475 风的影子 发表于 13:30 | 引用_0 | 编辑 搜索 Recent Articles Recent Comments Recommend Links 有话就说 有话要说 本BLOG[原]部分的内容采用 创作共用授权 ,请尊重劳动成果，谢谢。 Copyright © 2006 风的影子. All rights reserved. ■ FORESt.blOGbUS.COM ■ BLOGBUS.COM