【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 属性在大多数现代浏览器中都有良好的支持,但在一些较旧的浏览器中可能不受支持。因此,在使用这些属性时,最好先检查目标浏览器的兼容性情况。
相关推荐
开心工作室_kaic8 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿27 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript