outline与border
作者:互联网
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