初学css的朋友可能觉得 border 属性只是简单的绘制边框。其实， border是控制对象的边框边线宽度、颜色、虚线、实线等样式。可以对单个边框进行控制，也可以控制所有的边框。使用border属性可以制作更多的效果。在 CSS 中，你可以透过 border 的语法来对边框做许多样化的设计变化，例如设定边框的宽度、样式、颜色等等，也可以隐藏边框，原则上 CSS 对于 border 的设计不只局限于 p 区块或 span 的边框，也可以应用到其他的网页元素的边框上，例如网页标题的边框、图片的边框（img border）... 等，所有的主流浏览器都支援 CSS border 属性。下面就来具体的说明下border边框属性的使用。
首先学习php中文网相关的免费课程
1. 学习《html/css快速入门》中的 css边框样式 课程
2. 观看《极客学院CSS及CSS3视频教程》的 CSS盒子模型-边框 视频教程
border边框属性
1）border-width：不支持百分比，支持关键字，thin（1px），medium（默认值，3px，默认值是3px的原因是只有当border是3px及以上时，border-style才有效果），thick（5px）
2）border-style:有不同值，下面分析分别为不同值时的应用 a.solid：可以实现三角，梯形；b.dashed:虚线，在chrome/Firefox浏览器中，虚线和实线的比例是3:1（稀），在IE浏览器中，比例是2：1（密）；c.dotted:点线，在chrome/Firefox浏览器中，是方点，在IE浏览器中，是圆点（可以利用圆点实现圆角效果）；d.double:双线,计算规则，双线宽度永远相等，中间间隔+-1，例如，3px=1（内）+1（中间间隔）+1（外），可以实现三道杠图形；e.inset（内凹）,outset（外凸）,ridge（沟槽）:风格过时，兼容性差，没有什么使用场景
border-width 属性设置边框的宽度 可能的值：像素
border-style 属性设置边框的样式 可能的值：solid(直线)，dashed(虚线)，dotted(点线)
border-color 属性设置边框的颜色 可能的值：red,#f00,#ff0000,rgb(255,0,0),transparent
border-left 属性设置左边框
border-right 属性设置右边框
border-top 属性设置上边框
border-bottom 属性设置下边框
思路：当底边和水平线平行时，我们直接通过控制宽高比来实现我们想要的三角形效果；当与水平线不重合时这个时候就比较复杂了，就需要用到宽高比和CSS3中的transform属性和rotate相结合，让我们的三角形呈现出我们想要的效果（这里只是介绍思路，不去具体实现，其中有涉及到数学方面的知识可以自己百度）。
border 顾名思义就是边框的意思，在 CSS 中，你可以透过 border 的语法来对边框做许多样化的设计变化，例如设定边框的宽度、样式、颜色等等，也可以隐藏边框，原则上 CSS 对于 border 的设计不只局限于 p 区块或 span 的边框，也可以应用到其他的网页元素的边框上，例如网页标题的边框、图片的边框（img border）... 等，所有的主流浏览器都支援 CSS border 属性。
边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ;
所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ;
单属性也可以有组合写法：
border-width:上 右 下 左；（顺时针方向）
border-width:上 左右 下；
border-width:上下 左右 ；
border-width:四个方向；
border-style | border-color也可以这样设置；
6. CSS：Border属性
扩展知识 许多设计师一直用的是目前为止在本章列出的知识，然而，有一些方法我们可以进一步扩展！
多个边 当给一个元素应用多个边的时候，有各种各样的技术可以参考。
边的样式 solid，dashed和dotted是最常用的border-style属性值，还有其他几个我们可以使用的值，包括groove和ridge。
相关问答
【相关推荐】
1. php中文网免费视频教程：《php.cn独孤九贱（2）－css视频教程》
2. php中文网免费视频教程：CSS视频教程
以上是css中的border边框属性使用总结的详细内容。更多信息请关注PHP中文网其他相关文章！
