CSS 删除轮廓

​ CSS中的轮廓（outline）是指元素周围的边框，它不同于边框（border），它不占据空间，不会影响元素的布局。通常在使用tab键时，会出现一个虚线的框框，这就是默认的轮廓。在一些网站应用中，如需在用户点击时，让某个元素形成交互效果，通常使用outline来突出元素，但是在线上应用中，网站用户很难察觉轮廓变化，所以web开发人员往往会隐藏它。

隐藏轮廓

​ CSS提供了一个简易的方法来隐藏轮廓：

outline: none;

​ 这个CSS样式可以直接应用到元素上即可生效，当鼠标点击后，虚线轮廓将不再出现。

##自定义轮廓

​ 除了隐藏轮廓，你还可以自定义轮廓 。CSS的outline属性还可以接收多个值。举例来说，可以使用红色实线轮廓，宽度为2px的轮廓线来替换默认的轮廓，通过下面样例代码：

outline: 2px solid red;

​ 我们还可以将轮廓设定为不同的样式，有salt dotted、dotted、solid、double、groove等,如：

  outline: 1px dotted #AACCEE; /*1像素的点线*/
  outline: 2px dashed purple; /*2像素的虚线*/

删除轮廓但保留交互效果

​ 鉴于轮廓的交互性还是颇受欢迎的,可以通过将轮廓设置为透明来保留交互性，如下所示：

outline: 2px solid transparent;

总结

​ 无论是隐藏轮廓，自定义轮廓，还是保留交互效果，CSS的outline样式总是能够满足开发者的需求。掌握“css 删除轮廓”这个技能点，开发人员可以让页面更加美观，提升用户体验。