css中如何去掉button（按钮）的边框

用新的边框我们先要除去旧的边框才可以，然后再给他加上新边框，如下：

一，先除去：

1，看下默认样式效果，如图可以看到，默认padding和border，字体大小也是受浏览器默认指定

2，去除padding，指定一个字体大小，这里匹配了*表示所有元素，因为大部分的默认margin和padding都需要先去除，统一去除，后面需要再单独有针对性的添加

*{

margin: 0;

padding: 0;

font-size: 100%;

}

3，默认padding去除之后，按钮之间有间隙，这是inline-block默认的间距，用float来去除，并指定合适的宽和高

button{

float: left;

width: 60px;

height: 60px;

}

4，间距去掉了，但都显示成一行了，这个是因为添加的浮动影响的，可以在div元素后面去除浮动

div:after{

content: "";

display: block;

clear: both;

}

5，此时，可以看到边框重叠导致边框宽度不一致，需要自定义边框

border: 1px solid black;

margin-right: -1px;

margin-bottom: -1px;

6，从上面的图中，可以看到，在鼠标点击按钮的时候，会有蓝框选择的样式

加上outline: none;来去除

二，再加上是使用如下的编程方法：

导致会出现边框的原因是CSS的默认设置，所以只要把这个默认设置改掉就可以了。然后就可以加上你想要的边框了哦！

border: none;
outline: none;