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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中如何去掉button（按钮）的边框相关的知识，希望对你有一定的参考价值。

参考技术A

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

一，先除去：

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的默认设置，所以只要把这个默认设置改掉就可以了。然后就可以加上你想要的边框了哦！

CSS：去除input和button边框以及选中时边框默认样式

CSS：去除input和button边框以及选中时边框默认样式

<input type="text">

       input{
			
			border: 0;  // 去除未选中状态边框
		    outline: none; // 去掉外边的蓝色边框
			background-color: rgba(0, 0, 0, 0);// 透明背景
			}

Button 按钮的点击时候出现蓝色边框的问题

button{
         outline:none;
 }

以上是关于css中如何去掉button（按钮）的边框的主要内容，如果未能解决你的问题，请参考以下文章

怎么去掉按钮的边框?

c#中(winform)如何去掉button边框颜色？

androidbutton边框，htmlbutton按钮边框椭圆，怎么加css

怎么去掉button点击时的边框

android button边框怎么去掉

ionic button 怎么设置边框