关于border边框重叠颜色设置问题

盒子模型包括:margin border padding content

在标准盒子模型中 conten不包括border和padding  就是他自身内容所包含的区域。

在IE盒子模型中    content包括border和padding   是内容和border padding之和。

关于盒子边框重叠颜色设置问题:

//就拿下列标签来说
<ul>
    <li class="on">房产</li>
    <li>家居</li>
    <li>二手房房</li>
</ul>
css:
li{list-style: none;
            display: inline-block;
            border: 1px solid #4c6fe2;
            border-bottom: none;
            width:80px;}
   ul{border-bottom:2px solid #6e442c;
            height:px;
   width:400px;
            display: inline-block;
        }

.on{
          border-bottom:40px solid red;

      }   

因为ul没设定宽度所有加border的时候会撑开父元素宽度:效果如下

给父元素ul设置height

ul{border-bottom:2px solid #6e442c;
            height:28px;
            width:400px;
            display: inline-block;
        }

效果如下:

再缩小ul的高度:

把颜色设置为#fff 白色:

由此可见content内容区域的大小是固定不变的。border变大也只是外面去增加,而不会往里面增加。

给父元素设置高度的时候,只要border的宽度超过父元素ul的时候就会覆盖父元素的边框。

刚好覆盖如何设置:

li{list-style: none;
            display: inline-block;
            height:28px;
            border: 1px solid #4c6fe2;
            border-bottom: none;
        width:80px;

      }
        ul{border-bottom:2px solid #6e442c;
            height:29px;
   width:400px;
            display: inline-block;
        }
      .on{
          border-bottom:2px solid red;

上面把li的border-top设置为1px height设置为28 没有设置padding和下边框   那么只要把ul height设置为28+1 的时候 再把li的border设置为1px solid #fff;

时候刚好可以覆盖ul的的下边框。如下:

如果li没设置height怎么实现border覆盖?

 li{list-style: none;
      display: inline-block;
      border: 1px solid #4c6fe2;
       border-bottom: none;
        width:400px;
     }
ul{border-bottom:2px solid #6e442c;
    height:29px;
    width:400px;
    display: inline-block;
}
.on{
    border-bottom:2px solid red;
    padding-bottom:10px;
      }

可以设置padding-bottom,把border往外退 效果如下:

时间: 2024-10-21 16:24:53

关于border边框重叠颜色设置问题的相关文章

CSS border边框属性教程(color style)

CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色.虚线.实线等样式CSS属性.同时大家可以进入码农教程提供CSS手册查看border手册:http://www.manongjc.com/cssref/pr_border.html 二.Html原始边框与DIV+CSS边框对照 Html表格控制边框:border="1" bordercolo

边框样式的设置

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>边框样式的设置</title> <style> div{ width:400px; height:400px; } .div1{ border-width:10px;/*边框的宽度*/ border-style:solid;/*边框的样式*/ bo

CCS3怎么实现border边框渐变效果

下图注册按钮的边框有渐变效果,如果让你来实现,你会怎么做呢 个人觉得,省事的做法,直接让UI给背景图片就可以了,如下图 不过这种做法感觉不太灵活,如果要修改border的渐变颜色,就需要UI重新做图.那应该怎么做呢? 我首先想到的方法就是用CSS3的border-image属性 border-image有2种用法 ①:使用图片     ②:使用渐变 注:然后我选择使用上面第二种方法,渐变来实现.但遇到一个问题--border-raduis圆角属性设置无效 后来经过多番查找,终于找到了解决方法,截

[25--CSS] border 边框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> <!--border-width属性:设置边框的粗细--> <!--border-style属性:设置边框是实线还是虚线--> <!--border-color属性:设置边框的颜色--> <!-

table边框重叠导致的单元格边框宽度问题

偶然的看了一眼别人写的CSS,在注释中,说有table元素边框折叠(塌陷.重叠,那个词合适?)时,不同浏览器对单元格边框的计算是不一样的,然后还在注释中写了链接地址Border Collapse differences in FF and Webkit:对于死心眼的技术男来说,不探究一番究竟,还真睡不着觉了. 愤然打开网址(每次都很激愤,经常由于各种原因打开的巨慢),理清了思路,原来大体意思是说:虽然他们处理的不一样,但最后呈现出来的界面都是一样的.然后我慢慢的思考下,好像就是 Firefox

ueditor表格边框没有颜色的解决

问题: 用ueditor画表格,会发现表格存在,但是表格边框没有颜色. 解决方法: 需要对js文件中的样式进行修改,这里我引用的编辑器样式文件是ueditor.all.min.js,所以先找到该文件,有三个部分需要修改.注意:不同版本的js代码可能会有细微不同. 1.搜索到下面部分: c.push('<td width="'+b+'" vAlign="'+a.tdvalign+'" >'+(r.ie?e.fillChar:"<br/>

UITableView中cell边框和背景设置最佳方案

UITableView是iOS开发中最常用的视图控件,在平常用的iOS App中大部分都用到了UITableView. 需求很简单,就是在一个UITableView里面实现一个不一样的UITableViewCell,如下图里的“切换账号”按钮 正常情况下grouped样式(UITableViewStyleGrouped)UITableViewCell都是有边框的,所以如果只是用addSubView添加一个按钮的话,就会有边框在外面,不符合要求,也想过用一个大的图片,把这个cell给盖住,但是感觉

table表格嵌套,边框重叠变粗

在外层table与内层table嵌套,内外表格都需边框时,设置"border=1",但边框会重复,造成某些地方边框粗,有些地方边框细 解决方法 1.外表格样式 <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;"> 2.内表格样式 <table border="1&

Echarts字体和线条颜色设置操作笔记

这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧.我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码.这样更方便阅读及读者知道,是否对自己有所帮助,其重点是如何在模板动态网页或JSP网站中插入Echarts图片.        1.修改标题及背景颜色    2.设置柱形图颜色 3.修改坐标轴字体颜色        4.设置Legend颜色 5.修改折线颜色    6.修改油表盘字体大小及颜色 7.柱状图文本鼠标浮动上的颜色设置