css中如何去掉button(按钮)的边框

 我来答
惠企百科
2022-12-11 · 百度认证:北京惠企网络技术有限公司官方账号
惠企百科
惠企百科网是一家科普类综合网站,关注热门中文知识,集聚互联网精华中文知识,本着自由开放、分享价值的基本原则,向广大网友提供专业的中文知识平台。
向TA提问
展开全部

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

一,先除去:

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

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式