css去ul的点

CSS去掉图标外边框的方法

在网站开发中,我们常常需要使用图标来美化页面,通常会将图标作为图片来处理,但是这种处理方式会导致图标外部出现一些不必要的边框,影响美观性,那么该如何去掉图标的外边框呢?

css去掉图标外边框

方法一:使用CSS3的outline属性

使用outline属性可以去掉图标的外边框,具体实现代码如下:

.icon {
  outline: none;
}

方法二:使用CSS3的appearance属性

使用appearance属性同样可以去掉图标的外边框,具体实现代码如下:

.icon {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: none;
}

方法三:使用CSS3的border属性

通过CSS3的border属性,在图标外部添加一层透明的边框,达到去掉外边框的效果,具体实现代码如下:

.icon {
  border: none;
}

以上三种方法都可以很好地解决图标外边框的问题,具体使用根据实际情况选择即可。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效