border和outline的区别

合集 - bjjc奇奇怪怪bug(35)

1.uniapp微信小程序uni.request捕获500异常2024-04-162.uniapp兼容问题2024-04-173.推荐两个好玩的轻提示2024-04-184.不够完美但也很能打的2024-04-185.uniapp实现刷新页面保留参数页面不报错的情况2024-04-196.关于ESLint: Delete `␍`(prettier/prettier) 错误解决方案（3种）2024-04-247.loading2024-04-268.关于设备像素比2024-04-299.js前端去除HTML标签返回纯字符串正则/<[^>]*>/g2024-05-0610.Js中valueOf和toString区别和使用2024-05-0711.vscode关于json文件添加注释报错处理2024-05-0812.使用js有效括号匹配封装函数2024-05-1113.单项数据流和双向数据绑定的原理，区别2024-05-1114.CSRF（跨站请求伪造）原理：2024-05-1115.记录一下现网微信小程序版本ios手机极个别手机关于登录api（别的没试过）不调用的问题，其他的ios可以正常唯独极个别的ios不可以2024-05-1516.uniapp实现多行文本溢出超过指定行数 展开 收起2024-05-1617.uniapp开发抖音小程序跳转2024-05-1718.css滚动吸附2024-05-1919.promise(A).catch(f1).then(f2),f1执行后f2回执行吗，为什么2024-05-2020.国际化怎么做，中文一个字，阿拉伯语很长一串，怎么实现样式的一致2024-05-2021.页面切换保存怎么实现数据不丢失且记忆滚动条位置，常规的方案会闪一下，不如原生性能，怎么解决2024-05-2022.nuxtjs锁函数封装2024-05-2123.css样式让元素得宽度由内容撑开2024-05-2224.watch vs. watchEffect​2024-05-2825.HEIC2024-05-2826.Intersection Observer API 是浏览器原生提供的，用于异步检测目标元素与视口或父元素是否产生交叉。它的优势在于提高性能和简化代码实现。2024-05-2927.backdrop-filter（纯CSS实现丝滑边框线条动画）2024-05-3028.js中try中定义的数据catch无法访问2024-06-0629.自动化脚本同步单个平台所有小程序（本质跨平台uniapp但是业务紧急，按需使用）2024-06-1830.前端资源提示符2024-08-2931.微信小程序授权弹框2024-09-2732.关于高度从0到auto的过渡效果2024-11-1833.split使用注意点2024-11-2534.js之连续赋值2024-12-18

35.border和outline的区别2024-12-21

收起

在CSS（层叠样式表）中，border和outline都用于给元素添加边框效果，但它们之间存在一些区别：
最重要的一点outline外边框不占用空间

1. 用途和功能

• border
  • 主要用于定义元素的边框，是元素盒模型的一部分。它可以用于控制元素的大小和布局，因为边框的宽度会影响元素的总宽度和总高度。例如，当你设置一个div元素的border为10px solid black时，这个div元素在文档流中的尺寸会因为边框的存在而增加相应的大小。
  • 可以分别设置四条边（上、下、左、右）的样式、宽度和颜色，通过border - top、border - bottom、border - left、border - right等属性来进行更精细的控制。例如，你可以设置一个盒子的上边框为红色实线，下边框为蓝色虚线，左右边框为绿色双实线。
• outline
  • 通常用于在元素周围绘制一条额外的线，主要用于突出显示元素，以达到强调或指示交互性的目的。它不占据空间，不会影响元素的布局和尺寸。例如，当你在一个可聚焦的表单元素（如input）获得焦点时，使用outline来显示一个高亮的边框，提示用户当前元素处于激活状态，但这个边框不会改变元素原本在页面上的布局位置。
  • 一般是统一设置整个轮廓的样式、宽度和颜色，不过也可以通过一些浏览器特定的属性来进行有限的单边控制。

2. 外观和样式

• border
  • 样式更加丰富，可以设置为none（无）、hidden（隐藏）、dotted（点状）、dashed（虚线）、solid（实线）、double（双线）、groove（槽状）、ridge（脊状）、inset（凹陷）、outset（凸出）等多种样式。这些不同的样式可以创建出各种各样的视觉效果，适合用于设计复杂的页面布局和装饰性的边框。
  • 可以和其他CSS属性（如border - radius）配合使用，来创建带有圆角的边框效果，使元素看起来更加圆润美观。例如，设置border - radius: 10px;可以让一个正方形的元素四个角变成半径为10px的圆角。
• outline
  • 样式相对较少，主要包括none（无）、dotted（点状）、dashed（虚线）、solid（实线）等基本样式。其重点在于简单地勾勒元素的轮廓，而不是提供复杂的装饰效果。
  • 通常是一个简单的、围绕元素外部的线条，轮廓线与元素边缘之间的距离（outline - offset）可以进行调整，但不像border - radius那样可以方便地创建圆角效果。不过在一些浏览器中，通过非标准的方式也能实现一定程度的圆角轮廓。

3. 兼容性

• border
  • 是CSS的基本属性，被所有现代浏览器广泛支持，并且在不同浏览器之间的表现比较一致。在旧版本浏览器中也有较好的兼容性，只是一些较新的样式（如border - image）可能在非常旧的浏览器中不被支持。
• outline
  • 同样被大多数现代浏览器支持，但在一些较旧的浏览器或者某些特定的浏览器模式下，对于outline的一些属性（如outline - offset）可能存在兼容性问题。不过，对于基本的样式（如solid、dashed）和简单的应用场景，兼容性还是比较可靠的。

在实际的网页设计中，你可以根据具体的需求来选择使用border还是outline。如果需要定义元素的实际边界并且希望这个边界参与到布局中，或者需要创建复杂的边框样式，那么border是更好的选择；如果只是想简单地突出显示元素或者为元素添加一个不影响布局的轮廓指示，outline则更为合适。