【CSS】CSS 的outline-offset和outline属性作用是什么,怎么使用呢

outlineoutline-offset 是 CSS 中用于创建元素边框外部轮廓(outline)的两个属性。这些轮廓与边框(border)相似,但它们不占据布局空间,也不会影响元素的尺寸或位置。

outline 属性

outline 属性是一个简写属性,用于设置以下四个 outline 相关属性的值:

  • outline-width:定义轮廓的宽度。
  • outline-color:定义轮廓的颜色。
  • outline-style:定义轮廓的样式(如 soliddotteddashed 等)。
  • outline-offset:定义轮廓与边框之间的距离(outline-offset 不属于 outline 简写属性的组成部分,但经常与 outline 一起使用)。

使用示例:

css 复制代码
div {
  outline: 2px solid red; /* 宽度为 2px,实线样式,红色 */
}

outline-offset 属性

outline-offset 属性用于定义轮廓与边框之间的偏移量。正值会使轮廓向外移动,而负值会使轮廓向内移动。这个属性对于创建一些特殊效果非常有用,比如让轮廓看起来像是从元素的内部发光。

使用示例:

css 复制代码
div {
  border: 1px solid black; /* 黑色边框 */
  outline: 2px solid red; /* 红色轮廓 */
  outline-offset: 10px; /* 轮廓向外偏移 10px */
}

注意事项

  • 轮廓(outline)不会占据布局空间,因此它们不会与其他元素重叠或改变元素的尺寸。
  • 轮廓(outline)总是绘制在边框(border)的外部,即使设置了 outline-offset 属性。
  • 轮廓(outline)不会受到盒模型(box-model)的 box-sizing 属性的影响。
  • outlineoutline-offset 属性在大多数现代浏览器中都有良好的支持,但在一些较旧的浏览器中可能不受支持。因此,在使用这些属性时,最好先检查目标浏览器的兼容性情况。
相关推荐
然我14 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子19 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹22 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器29 分钟前
指定阿里镜像原理
前端
枷锁—sha33 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha35 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss