【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 属性在大多数现代浏览器中都有良好的支持,但在一些较旧的浏览器中可能不受支持。因此,在使用这些属性时,最好先检查目标浏览器的兼容性情况。
相关推荐
reembarkation17 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu17 小时前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|17 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青17 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥17 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb17 小时前
【Python】字符串
java·前端·python
阿笑带你学前端17 小时前
Supabase云同步架构:Flutter应用的数据同步策略
前端
梦想CAD控件18 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
万少18 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
掘金约基奇_18 小时前
JS-SDK开发企微侧边栏
前端·javascript