outline与border

2021-11-13 22:32:50 阅读：144 来源： 互联网

outline

在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。

outline 能告诉用户那一个可以激发事件的html元素获取了焦点，对钟爱键盘操作的用户尤其有意义。一个清晰悦目的outline设计能提高使用表单的用户体验。另一方面，outline 也有些讨厌的地方，比如使用CSS设计的Tab(标签页)时，选择一个Tab之后，Tab上的轮廓虚线会一直显示，有些影响美观。

border

border属性是CSS的一个简写属性，是用于设置所有的边框属性。可以设置的边框属性有：边框的宽度、边框的样式、边框的颜色。

border具有如下属性：border-width，border-style，border-color。还可以有更简洁的使用方法，如：

border：1px solid red；

就是设置一个宽度一像素的红色实线边框。

border-style:dotted solid double dashed;

上边框是点状
右边框是实线
下边框是双线
左边框是虚线

outline 与 border 的区别

border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。

标签：outline,边框,Tab,border,CSS,属性
来源： https://www.cnblogs.com/mhyweb/p/15550079.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

outline与border