您的位置:CSS5 > 新闻文摘 >

 

mui mui-table-view顶部和底部的边框去掉方法

 

MUI框架开发时,class=mui-table-view自带上边框与下边框一样的边框效果,如何去掉mui-table-view顶部和底部的边框?

设置border: none; (border-top:0;border-bottom上下边框为0)均无效,无法去掉。

去掉方法:

.mui-table-view:after{ height:0}
.mui-table-view:before{ height:0}

设置此样式对象前插入高度为0,对象后插入高度为0。

MUI默认CSS文件里设置.mui-table-view:after和.mui-table-view:before高度为1px,设置灰色背景,模拟出前后边框效果,所以你再到引入CSS库后加入以上代码即可。

比如HTML link引入CSS文件顺序(一定不能错):

<link href="css/mui.min.css" rel="stylesheet"/>
<link href="mystyle.css" rel="stylesheet"/>

然后mystyle.css自定义自己新建CSS文件里放入

.mui-table-view:after{ height:0}
.mui-table-view:before{ height:0}

再声明:因为浏览器读取CSS是从上到下,这样MUI CSS库设置的被后面自定义CSS覆盖,所以注意顺序,输入以上代码即可实现去掉上边框和去掉下边框效果样式(实际上是去掉1px高度背景色)。

 

标签(Tag): 边框
本文分享URL地址:http://css5.com.cn/article/1483.shtml

更多

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2018-01-15     点击:
原创:CSS5     来源网址:http://css5.com.cn/article/1483.shtml
本文css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!