css中如何去掉button(按钮)的边框
发布网友
发布时间：2022-04-23 10:58
共2个回答
热心网友
时间：2022-04-06 13:30
用新的边框我们先要除去旧的边框才可以，然后再给他加上新边框，如下：
一，先除去：
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;来去除
二，再加上是使用如下的编程方法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
div{
width:200px; height:100px; border-bottom:1px solid #CCC;}
</style>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
导致会出现边框的原因是CSS的默认设置，所以只要把这个默认设置改掉就可以了。然后就可以加上你想要的边框了哦！
热心网友
时间：2022-04-06 14:48
border: none;
outline: none;
