【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 属性在大多数现代浏览器中都有良好的支持,但在一些较旧的浏览器中可能不受支持。因此,在使用这些属性时,最好先检查目标浏览器的兼容性情况。
相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试