10.7 border-width边框粗细:outline与border有什么不同?

时间:2022-07-28
本文章向大家介绍10.7 border-width边框粗细:outline与border有什么不同?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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 的外围。

示例:

    <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这个简写属性了。

语法:

<line-width> || <line-style> || <color>

用一个,两个或三个值来指定border属性。 值的顺序无关紧要 。一般顺序为line-width、line-style及color。

示例:

border: 1px solid #3a6587;
border: 1px dashed red;

关于设备像素比devicePixelRatio与1px的问题

当我们通过border-width或border设置边框的时候,边框粗细在屏幕上是如何表现的?

禁止缩放代码:

<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 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。