outline和border

作者: 尤格萨隆 | 来源:发表于2019-08-21 13:39 被阅读0次
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
  • 只有在规定了 !doctype 时,IE8及以上版本才支持outline
CSS 的 outline 属性允许我们改变这个默认的轮廓虚线框效果。其属性有:
  • outline
    速写形式,格式为:outline: outline-color || outline-style || outline-width
  • outline-color
    规定边框的颜色。
  • outline-style
    规定边框的样式。
  • outline-width
    规定边框的宽度。
  • outline-offset
    对轮廓进行偏移,并在边框边缘进行绘制。
    如下例所示即为规定边框边缘之外 15 像素处的轮廓:
div{
  border:2px solid black;
  outline:2px solid red;
  outline-offset:15px;
}
outline和border的区别
  • outline 不会象border那样影响元素的尺寸或者位置,outline不占据空间。

border 可应用于几乎所有有形的html元素,而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出,那就是: outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需JavaScript配合CSS来控制。

相关文章

  • outline和border

    outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 只有在规定了 !do...

  • css outline 和 border

    outline 官方解释如下:https://developer.mozilla.org/zh-CN/docs/W...

  • border和outline区别

    2019-03-02-14:52: 在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候...

  • outline与border

    1.outline属性: 2.outline与border对比:

  • CSS-笔记

    border与outline的区别 border 可应用于几乎所有有形的html元素,而 outline 是针对链...

  • 盒子大小、轮廓和阴影、浮动

    盒子大小(box-sizing属性) 轮廓(outline) outline的用法和border的用法类似 二者的...

  • outline 与 border

    定义和用法 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。(注意:轮...

  • outline & border

    outline CSS2出现,CSS3作了扩展,突出元素的作用 1.针对链接、表单控件和ImageMap等元素设计...

  • CSS border outline

    边框和轮廓 边框和轮廓是位于外边距内外的线框,有时候,设置边框和轮廓属性对于网页布局很有用,尤其是边框。 边框bo...

  • CSS:outline的用法,用outline实现镂空效果

    1.outline的用法 outline用法和border类似, 如下: 两者表现也类似, 都是给元素的外面画框,...

网友评论

    本文标题:outline和border

    本文链接:https://www.haomeiwen.com/subject/almbsctx.html