【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 属性在大多数现代浏览器中都有良好的支持,但在一些较旧的浏览器中可能不受支持。因此,在使用这些属性时,最好先检查目标浏览器的兼容性情况。
相关推荐
y先森29 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy29 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891132 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端