CSS设计中的三个边框
如果你需要将一个dom元素设置为三个边框，会有许多你可以使用的方法。本文就从这里出发，为你讲解设置三边框的方法：
你可以特别的分别声明三个边框的属性：
css代码如下：
div {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
该方法有点繁琐，但是很容易理解。
你也可用只声明一个边框，来覆盖四个边框中的这个边框的属性，从而实现你需要的效果。
CSS代码如下：
div {
border: 1px solid red;
border-left: 0;
}
这种方法非常简洁，但是需要覆盖的属性必须写在边框属性的后面，从而覆盖掉前面的属性。
或者，你可以定义dom元素的边框颜色、样式，然后再单独设置一下需要控制的边框的宽度。
CSS代码如下：
div {
border-color: red;
border-style: solid;
border-width: 1px 1px 1px 0;
}
比第一种方式更短，而且重复的更少。只需要了解如果左边框确实有宽度的话，那它是有颜色和样式的。
但是，事实上，边框将影响dom元素的大小，如果你想增加一个边框而又不想让元素变大，就需要依赖于CSS3了。这里是使用插入阴影的解决方法：
CSS3代码如下：
div {
-webkit-box-shadow:
inset -1px 0 0 red,
inset 0 -1px 0 red,
inset 0 1px 0 red;
-moz-box-shadow:
inset -1px 0 0 red,
inset 0 -1px 0 red,
inset 0 1px 0 red;
box-shadow:
inset -1px 0 0 red,
inset 0 -1px 0 red,
inset 0 1px 0 red;
}
问题来了，你想使用阴影的话，上面的这段代码只能工作在IE9.0以上的版本，这就涉及IE浏览器的兼容性问题了。如果你想让这样的效果运行在IE8上面，那可以参看这篇文章 box-sizing.
是的，本文题目中的问题看上去是如此的简单，但是我想在CSS的世界中，任何一个看似渺小的问题有如此多不同的解决方法，也许，这才是通往高手的道路吧，呵呵。