CSS中的border属性，我想稍微了解CSS的人都知道它是干什么的，在MDN上可以找到详细的介绍。简单来说，border就是我们常用的边框。一个很基本的用法是border:1pxsolidblack;//相当于border-width:1px;边框样式：实心；边框颜色：黑色；下面是演示效果：当然你也可以定义很多奇怪的边框类型，比如圆角（radius，可能兼容性不太好），椭圆（其实只要懂椭圆就可以随意画边框）。border1pxsolidblack;border-radius:50%;border-top,-right,-bottom,-left看了这么多有趣的DEMO，你真的了解border了吗？我最近遇到了一个有趣的CSS样式，它让我对边框有了深刻的理解。通常我们在使用border的时候，基本上都是要给border一个宽度，1px，偶尔2px，也没有找到border和元素的关系。当我们将border-width改为更大的值时，问题就来了。边框：20px纯灰色；并且，border可以分别设置top,right,bottom,left的值：border:20pxsolidgray;边框顶部宽度：40px；左边框宽度：40px；border和border的交界处应该怎么判断呢？理解这一点很重要，如果你也发现了这个问题，那么下面有趣的事情就来了：border:20pxsolid;边框顶部颜色：黑色；右边框颜色：红色；边框底部颜色：灰色；左边框颜色：蓝色；它实际上是分隔边界的内顶点和外顶点之间的连接。如果元素的宽高设置为0，则添加一个radius:width:0;高度：0；边界半径：50%；border-radius的原理你应该先了解了吧！关于border-radius的选择，可以在SF上看到这个问题。直角怎么样。实现带边框的箭头了解了边框的一些基本知识，我们就可以实现对话框中常见的箭头，像下面这样：这个需要借助CSS中的transparenttransparent来实现。例如，我们需要一个向右的箭头。参考上面例子中当宽高为0时，对应的边框尺寸为15px、0px、15px、30px，先看下面的例子border-width:15px0px15px30px;边框颜色：黑灰色；边框样式：实心；这个需要设置border-top和border-bottom的颜色为透明，border-color:transparentgray;那么，其他三个角的箭头也可以这样设计：看完这篇文章，我觉得border的功能不是很强大。其实我们常见的一些气泡和形状都可以用border来实现。哈哈，鄙视那些用图片的同学。共勉。参考CSSRefreshers：Borders欢迎来到我的博客。
