div盒子双线边框线内的颜色处理方法

本人是萌新一枚，刚刚接触h5c3，如有不足，请各位大佬多多指教！

这个问题是我在写作业时发现的，我以为有什么属性可以去控制双线边框线内的颜色，我在CSDN上搜了之后并没有发现有什么可以去解决这个问题的方法，思考一会儿后想到了这个方法，希望同样遇到这个问题的朋友们可以得到解决方案。

问题图片：

可以看到双线边框线内的颜色是后面背景图片的颜色，而不是和盒子内的背景颜色一样。

解决方法：在这个盒子模型的外部再去镶嵌一个盒子模型。

代码：

 .waibiankuang{width:1020px;height:710px;background: antiquewhite;margin:0px auto;}
/*新镶嵌的盒子模型*/.biankuang{border-top: 10px double #000000;border-right: 10px double #000000;border-left: 10px double #000000;width: 1000px;height: 700px;margin:0px auto;}

在添加这个新盒子模型后，显示的效果如下：

这样的话，对于盒子模型的双线外边框线内的颜色修改就完成了。

整个页面的源码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">p{text-indent: 2em;}.beijing{background: url(images/12bg.gif);width: 1200px;height: 710px;margin: 10px auto;}.waibiankuang{width:1020px;height:710px;background: antiquewhite;margin:0px auto;}.biankuang{border-top: 10px double #000000;border-right: 10px double #000000;border-left: 10px double #000000;width: 1000px;height: 700px;margin:0px auto;}.hezi{background-color: antiquewhite;width: 1000px;height: 700px;}.title{color:red;font-size: 30px;text-align: center;padding-top: 30px;}.img{width: 400px;height:300px;border: 1px solid red;margin-left: 1em;margin-right: 1em;margin-bottom: 2em;padding-top: 1em;padding-right: 1em;padding-bottom: 1em;padding-left: 1em;float: left;}</style><body><div class="beijing"><div class="waibiankuang"><div class="biankuang"><div class="hezi"><div class="title">做人做事的艺术<hr width="95%"></div><div><br><div class="img"><img src="data:images/12.jpg"></div> <p>做人做事是一门艺术，更是一门学问。很多人之所以一辈子都碌碌无为，那是因为他活了一辈子都没有弄明白该怎样去做人做事。</p>                  <p>每一个人生活在现实社会中，都渴望着成功，而且很多有志之士为了心中的梦想，付出了很多，然而得到的却很少，这个问题不能不引起人们的深思：你不能说他们不够努力，不够勤劳，可为什么偏偏落得个一事无成的结局呢？这值得我们每一个人去认真思考。从表面上看，做人做事似乎很简单，有谁不会呢？其实不然，比如说你当一名教师，你的主观愿望是当好教师，但事实上却不受学生欢迎；你去做生意，你的主观愿望是赚大钱，可偏偏就赔了本。抛开这些表层现象，去发掘问题的症结，你就会发现做人做事的确是一门很难掌握的学问。</p>            <p>可以这么说，做人做事是一门涉及现实生活中各个方面的学问，单从任何一个方面入手研究，都不可能窥其全貌。要掌握这门学问，抓住其本质，就必须对现实生活加以提炼总结，得出一些具有普遍意义的规律来，人们才能有章可循，而不至于迷然无绪。</p>         <p>每一个人生活在现实社会中，都渴望着成功，而且很多有志之士为了心中的梦想，付出了很多，然而得到的却很少，这个问题不能不引起人们的深思：你不能说他们不够努力，不够勤劳，可为什么偏偏落得个一事无成的结局呢？这值得我们每一个人去认真思考。从表面上看，做人做事似乎很简单，有谁不会呢？其实不然，比如说你当一名教师，你的主观愿望是当好教师，但事实上却不受学生欢迎；你去做生意，你的主观愿望是赚大钱，可偏偏就赔了本。抛开这些表层现象，去发掘问题的症结，你就会发现做人做事的确是一门很难掌握的学问。</p></div></div></div></div></div></body>
</html>

div盒子双线边框线内的颜色处理方法相关推荐

html表格内框线怎么设置颜色,word表格样式 Word中如何设置表格的边框线样式和颜色...
word表格样式 Word中如何设置表格的边框线样式和颜色,平凡的世界平凡的你,努力学习使我们变得不平凡,今天要介绍的知识是word表格样式的相关知识,你准备好学习word表格样式 Word中如何设置 ...
Word中如何设置表格的边框线样式和颜色
在 Word 中完成表格制作工作后,我们可以将表格中的边框线的线形设置成各种样式,不仅不如此,我们还可以将边框线的颜色自由设置.这样的表格就比平常我们看到的表格要多样化一些.下面就看看是如何操作的吧! ...
盒子模型、div盒子、边框粗细、外边距
1.盒子模型概念:盒子模型是由margin + border + padding +网页元素(content)组成图示: 最简单的盒子: <style> ul{ border: 1px ...
html如何隐藏盒子的边框线,HTML盒子模型+边框
盒子模型(框模型) 一个盒子分为四部分 1.内容区(content) 2.内边距(padding) 3.边框(border) 4.外边距 (margin) 盒子的大小是由(内容区.内边距.边框)决定 ...
css给盒子添加边框线
上边框线 .border-top::before{content: "";position: absolute;height: 0.02rem;width: 100%;border ...
html如何隐藏盒子的边框线,用DIV和CSS做一个实线边框的红色盒子
做一个案列给大家参考,我们使用DW软件来做一个红色实线边框的盒子,我们给这个盒子命名为DIV,下面就是代码案列为了观察效果对盒子设置一个css高.css宽样式,并赋予红色css边框样式.同时为了兼容 ...
div盒子水平垂直居中以及表格的居中的方法
目录多种水平垂直居中方法这里的方法和第二种一致,方便用来对系统后台进行布局 #admin {position: absolute;top: 50%;left: 50%;margin-top: -1 ...
Echarts折线图样式修改(拐点大小,拐点边框大小及颜色,hover拐点内填充颜色等)
项目需求: 折线图hover 时拐点大小不变;hover时拐点内空心点填充为实心,定义拐点颜色,边框线大小以及颜色等,下面简单演示修改拐点样式: option = {title: {text: '堆叠 ...
Java中表头的边框置为实线,div的边框线为实线怎么样设置
一.边框属性简单介绍 1.边框属性为border 2.边框兼容好的重用样式有: none : 无际框 solid 实线边框 dashed 虚线边框 3.div标签设置边框线为实线,那么就是要borde ...

div盒子双线边框线内的颜色处理方法

本人是萌新一枚，刚刚接触h5c3，如有不足，请各位大佬多多指教！

div盒子双线边框线内的颜色处理方法相关推荐

最新文章

热门文章

div盒子双线边框线内的颜色处理方法

本人是萌新一枚，刚刚接触h5c3，如有不足， 请各位大佬多多指教！

div盒子双线边框线内的颜色处理方法相关推荐

最新文章

热门文章

本人是萌新一枚，刚刚接触h5c3，如有不足，请各位大佬多多指教！