CSS去掉div的边框可以去掉css的border属性，或者覆盖border属性为none来实现。
1、如图，这是一个带边框的div测是页面。
2、第一个div的边框是这行css实现的效果
border:5pxsolidblack
3、第二个div没有设置边框样式
4、第三个div的css设置了边框样式，但被内联样式覆盖为none，因此也能不显示边框。
代码如下
<divclass="box1"></div>
<divclass="box2"></div>
<divclass="box3"style="border:none"></div>
div{
width:200px
height:120px
margin-bottom:10px
background-color:yellow
}
.box1,.box3{
border:5pxsolidblack
}
用新的边框我们先要除去旧的边框才可以，然后再给他加上新边框，如下：
一，先除去：
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/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
div{
width:200pxheight:100pxborder-bottom:1px solid #CCC}
</style>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
导致会出现边框的原因是CSS的默认设置，所以只要把这个默认设置改掉就可以了。然后就可以加上你想要的边框了哦！
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<img src="small.png" style="border: 0" />。
3、浏览器运行index.html页面，此时img图片的边框被去除了。
