border-width边框粗细：outline与border有什么不同？
border-width 属性可以设置盒子模型的边框宽度。
为什么线的粗细叫宽度？边框线像马路往前冲，马路的宽度就好比是线的宽度。此外，还有stroke-width，是以后学Canvas绘制时要接触到的，是绘制的线的粗细，它们的名字是类似的。
- border-width
- stroke-width
- outline-width
规范并没有规定实际值，故在不同浏览器效果是不一样的，但总体来讲，thin≤medium≤thick。
- thin
- medium
- thick
- 像素值
谁是厚，谁是薄？thin是薄，thick是厚。意思从单词字母的宽度上也可以看出来，一个是四个字母，一个是五个字母。
示例：
border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
简写语法（仍然是四值语法）：
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
轮廓线粗细outline-width
outline-width 用于设置一个元素的轮廓的厚度。元素轮廓是绘制于元素周围的一条线，位于 border 的外围。
示例：
代码语言：javascript复制 <h1>outline-width示例</h1>
<style>
#outline-div span {
outline-style: solid;
display: inline-block;
margin: 20px;
}
#thin {
outline-width: thin;
}
#medium {
outline-width: medium;
}
#thick {
outline-width: thick;
}
</style>
<div id="outline-div">
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
</div>效果：
问题：outline与border有什么区别？
- border占用空间，outline不占用空间，不会影响元素的尺寸和位置。
- border 可应用于几乎所有有形的html元素，而outline 是针对链接、表单控件、ImageMap和span等元素设计。
border-style边框样式
border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。
有以下取值：
- none 和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
- hidden 和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。
- dotted 显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。
- dashed 显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
- solid 显示为一条实线。
- double 显示为一条双实线，宽度是 border-width 。
- groove 显示为有雕刻效果的边框，样式与 ridge 相反。
- ridge 显示为有浮雕效果的边框，样式与 groove 相反。
- inset 显示为有陷入效果的边框，样式与 outset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式。
- outset 显示为有突出效果的边框，样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。
示例：
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
简写语法：
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;
border属性简写
在了解了border-width与border-style以后，接下来就可以使用border这个简写属性了。
语法：
代码语言：javascript复制<line-width> || <line-style> || <color>用一个，两个或三个值来指定border属性。 值的顺序无关紧要 。一般顺序为line-width、line-style及color。
示例：
代码语言：javascript复制border: 1px solid #3a6587;
border: 1px dashed red;关于设备像素比devicePixelRatio与1px的问题
当我们通过border-width或border设置边框的时候，边框粗细在屏幕上是如何表现的？
禁止缩放代码:
代码语言：javascript复制<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">viewport的设置，和屏幕物理分辨率是按比例对等的，而不是相同的。移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么大。
使用
window.devicePixelRatio
可以查看当前窗口的设备像素比。在浏览器里按CTRL 或-，是可以改变这个值的。
例如，iPhone的devicePixelRatio==2，而border-width: 1px描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。
9月29日
【关于作者】
李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。
