css如何去除边框-木庄网络博客

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

css去除边框的方法：1、使用“border:none”定义无边框样式；2、使用“border:1px solid transparent”设置边框透明；3、使用“border:1px solid 背景颜色值”设置边框颜色与背景颜色一样。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

新建一个html文件，命名为test.html，用于讲解CSS如何去掉div的边框。

M8862F2LKJDOX0LK)4KD~}I.png

在test.html页面中，创建一个div，并设置其css类名为con，代码如下：

15V{{I`4Y@~HRNHK78BD9OT.png

使用css设置div在页面居中显示，并设置其宽高都为300px，同时设置div为红色的边框。

L@]~YBTBP}$9_LGENUSDABJ.png

[]`30RRS9IUQGT{PTA@JR25.png

在css中，设置一个去除边框样式的类名removeborder，并把它加入div的class类属性中。

FX7DT2]XK74LG$PKPQJ[(YX.png

方法一：在类名为removeborder的样式中，使用border:none来去除div的边框显示，如下图所示：

JHR%D~]U4SM]P[WH{W8XREX.png

$UTJ_NHJ0F{5S2HC4YVZ)]_1.png$

方法二：在类名为removeborder的样式中，使用border:1px solid transparent设置边框透明来去除div的边框显示，如下图所示：

87QT]PONRF{~ODMU1RXW7KJ.png

6GMSV`2(4%TUMV@N~SI{X{U.png

方法三：在类名为removeborder的样式中，使用border:1px solid yellow设置边框的颜色与背景颜色一样来去除div的边框显示，如下图所示：

[H$I6}BGL5(FG)OVDYCW{)D.png

AILZ7)%5B%4G24E%}WWG2{B.png

推荐学习：css视频教程

以上就是css如何去除边框的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者