我是一个小白程序员,准备开发小程序找了很久小程序开发引擎,看到白鹭和LayaAir
。经过一番资料查找后被LayaAir高性能、接口简洁及社区活跃所吸引,然后选择了LayaAir。

CSS魔法堂:Box-Shadow没那么简单啦:)

2016/05/19 · CSS · 2
评论 ·
box-shadow,
CSS

本文作者: 伯乐在线 –
^-^肥仔John
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

  很早之前就学过了弹性盒子,就感觉自己什么都学会了,没想到到了实际的运用过程中,其实并不是那么一回事,自己根本想不到会用到哪些属性,该怎么使用。

开发过程中一般小问题都说看看官网看看文档就能解决了,但是现在我遇见了解决不到问题,官网又没任何资料的时候,我提了个问题就是白鹭引擎里控制骨骼运动在LayaAir怎么实现时,官方人员却含糊其辞。我想这问题一年前就有人问过了应该有人知道吧,不过我太天真了,得到的答案只是技术大佬的嘲讽。

前言

说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事。

  这一次就只把我使用过程中遇到的一些坑来总结一下。

图片 1

二话不说看效果

3D小球
图片 2

XHTML

<style type=”text/css”> .ball{ background: rgba(100,100,100,0.2);
width: 100px; height: 100px; padding: 10px; border-radius: 50%;
box-shadow: -14px 8px 100px #333 inset, 0 0 2px #888, 3px -1px 4px
#444; } </style> <div class=”ball”></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
.ball{
  background: rgba(100,100,100,0.2);
  width: 100px;
  height: 100px;
  padding: 10px;
  border-radius: 50%;
  box-shadow: -14px 8px 100px #333 inset,
              0 0 2px #888,
          3px -1px 4px #444;
}
</style>
<div class="ball"></div>

纸张阴影(来自@张鑫旭老师)
图片 3

XHTML

<style type=”text/css”> .curved_box { display: inline-block;
*display: inline; width: 200px; height: 248px; margin: 20px;
background-color: #fff; border: 1px solid #eee; -webkit-box-shadow: 0
1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0,
0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0,
0, 0, 0.06) inset; position: relative; *zoom: 1; } .curved_box:before
{ -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform:
skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); left:
15px; } .curved_box:after { -webkit-transform: skew(15deg)
rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); transform:
skew(15deg) rotate(6deg); right: 15px; } .curved_box:before,
.curved_box:after { width: 70%; height: 55%; content: ‘ ‘;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0
8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
position: absolute; bottom: 10px; z-index: -1; } </style> <div
class=”curved_box”></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style type="text/css">
.curved_box {
    display: inline-block;
    *display: inline;
    width: 200px;
    height: 248px;
    margin: 20px;
    background-color: #fff;
    border: 1px solid #eee;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    position: relative;
    *zoom: 1;
}
 
.curved_box:before {
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg);
    left: 15px;
}
.curved_box:after {
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg);
    right: 15px;
}
 
.curved_box:before, .curved_box:after {
    width: 70%;
    height: 55%;
    content: ‘ ‘;
    
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    
    position: absolute;
    bottom: 10px;
    z-index: -1;    
}
</style>
<div class="curved_box"></div>

  使用弹性盒子的情况还是需要去看布局的,这个属性使用起来非常爽,不需要考虑那么多,直接几行代码就完成了之前浮动布局要完成的情况,而且自适应页面的能力也要强出好多,不需要自己再去调整好久的样式像素。

说我态度不好,但是我没半点不尊敬,我觉得LayaAir开发挺好的,可是让我认错,我不知道怎么认。我又没骂我只是提问题而已。免费用别人引擎难道就不能提问题了吗。
图片 4
我没有怼引擎,也没说LayaAir不好,不然我也不会用。别人提了我这个相同的问题是一年前的,我不知道他是怎么解决的,官网也没有任何代码提示,我很无奈。

细读属性

看到上面这么绚丽的效果,是不是迫不及待想弄清box-shadow呢?下面我们来一步步解密它吧!

  直接上布局的样子吧。

图片 5

概述属性语法

box-shadow: none | <shadow>[,<shadow>]*
默认值为none
<shadow>:inset? && <length>{2,4} && <color>?
shadow pattern,默认为outset,即采用outer
box-shadow。通过设置为inset时,则采用inner box-shadow。
horizontal
offset
,阴影距离原位置的水平位移,正数表示向右移动,负数表示向左移动。
vertical
offset
,阴影距离原位置的垂直位移,正数表示向下移动,负数表示向上移动。
blur radius,默认值为0,阴影模糊度半径。
spread distance,默认值为0,扩展或缩小阴影的作用面积。
<color>,阴影颜色,默认与color属性一致。

注意:我们可以同时设置多个阴影,而阴影的z-index值从左向右递减。

    页面一

  图片 6

  比如说上面的样式,你们可能有别的更好的布局思路,可以分享一下的哈。
我就说说我猜到的坑,因为之前根本就没有这样去写过,所以有一些细节的部分根本没有考虑过,后来写过一次之后,在看到这种布局就变得容易多了。

我是技术菜鸟,改底层我真做不到。叫我去重写这,重写那。代码的确开源了,可是我真看不懂。各位都是技术大佬都能直接改底层,我膜拜。

outer box-shadow 和 inner box-shadow怎么玩?

默认情况下采用的是outer
box-shadow,当在box-shadow中添加inset关键词后,则采用inner
box-shadow了,但到底它俩的效果是如何的呢?
图片 7

XHTML

<style type=”text/css”> .box{ float: left; background: #888;
width: 100px; height: 100px; margin-right: 20px; } .outer-box-shadow{
box-shadow: 10px 10px #F00; } .inner-box-shadow{ box-shadow: 10px 10px
#F00 inset; } </style> <div class=”box
outer-box-shadow”></div> <div class=”box
inner-box-shadow”></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
.box{
  float: left;
 
  background: #888;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.outer-box-shadow{
  box-shadow: 10px 10px #F00;
}
.inner-box-shadow{
  box-shadow: 10px 10px #F00 inset;
}
</style>
<div class="box outer-box-shadow"></div>
<div class="box inner-box-shadow"></div>
</div>

outer-box-shadow
特点:阴影落在元素的border box之外。
实现原理:

  1. 创建一个与元素border box尺寸一致的阴影盒子;
  2. 将阴影盒子定位到于元素border box重合,并位于元素之下;
  3. 根据horizontal offsetvertical offset来相对原位置作移动;
  4. 根据spread distance缩放阴影盒子的尺寸(会影响盒子的位移);
  5. 根据blur radius对阴影盒子作加工;
  6. 最后将阴影盒子与元素border box重合部分剪切掉。
    图片 8
XHTML

&lt;style type="text/css"&gt; .box{ background: \#888; width: 100px;
height: 100px; } .outer-box-shadow{ box-shadow: 90px 10px \#F00; }
&lt;/style&gt; &lt;div class="box outer-box-shadow"&gt;&lt;/div&gt;
&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-12">
12
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6992dad7a647897445-1" class="crayon-line">
&lt;style type=&quot;text/css&quot;&gt;
</div>
<div id="crayon-5b8f6992dad7a647897445-2" class="crayon-line crayon-striped-line">
.box{
</div>
<div id="crayon-5b8f6992dad7a647897445-3" class="crayon-line">
  background: #888;
</div>
<div id="crayon-5b8f6992dad7a647897445-4" class="crayon-line crayon-striped-line">
  width: 100px;
</div>
<div id="crayon-5b8f6992dad7a647897445-5" class="crayon-line">
  height: 100px;
</div>
<div id="crayon-5b8f6992dad7a647897445-6" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f6992dad7a647897445-7" class="crayon-line">
.outer-box-shadow{
</div>
<div id="crayon-5b8f6992dad7a647897445-8" class="crayon-line crayon-striped-line">
  box-shadow: 90px 10px #F00;
</div>
<div id="crayon-5b8f6992dad7a647897445-9" class="crayon-line">
}
</div>
<div id="crayon-5b8f6992dad7a647897445-10" class="crayon-line crayon-striped-line">
&lt;/style&gt;
</div>
<div id="crayon-5b8f6992dad7a647897445-11" class="crayon-line">
&lt;div class=&quot;box outer-box-shadow&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6992dad7a647897445-12" class="crayon-line crayon-striped-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


模拟一下:  
![](http://images2015.cnblogs.com/blog/347002/201605/347002-20160510113456437-1655623056.png)  



XHTML

&lt;style type="text/css"&gt; .box{ position: relative; }
.box-shadow{ position: absolute; z-index: -1; background: \#F00;
width: 100px; height: 100px; left: 20px; top: 20px; } .box-content{
background: \#888; width: 100px; height: 100px; } &lt;/style&gt;
&lt;div class="box"&gt; &lt;div class="box-shadow"&gt;&lt;/div&gt;
&lt;div class="box-content"&gt;&lt;/div&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-23">
23
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6992dad7d645852931-1" class="crayon-line">
&lt;style type=&quot;text/css&quot;&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-2" class="crayon-line crayon-striped-line">
.box{
</div>
<div id="crayon-5b8f6992dad7d645852931-3" class="crayon-line">
  position: relative;
</div>
<div id="crayon-5b8f6992dad7d645852931-4" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f6992dad7d645852931-5" class="crayon-line">
.box-shadow{
</div>
<div id="crayon-5b8f6992dad7d645852931-6" class="crayon-line crayon-striped-line">
  position: absolute;
</div>
<div id="crayon-5b8f6992dad7d645852931-7" class="crayon-line">
  z-index: -1;
</div>
<div id="crayon-5b8f6992dad7d645852931-8" class="crayon-line crayon-striped-line">
  background: #F00;
</div>
<div id="crayon-5b8f6992dad7d645852931-9" class="crayon-line">
  width: 100px;
</div>
<div id="crayon-5b8f6992dad7d645852931-10" class="crayon-line crayon-striped-line">
  height: 100px;
</div>
<div id="crayon-5b8f6992dad7d645852931-11" class="crayon-line">
  left: 20px;
</div>
<div id="crayon-5b8f6992dad7d645852931-12" class="crayon-line crayon-striped-line">
  top: 20px;
</div>
<div id="crayon-5b8f6992dad7d645852931-13" class="crayon-line">
}
</div>
<div id="crayon-5b8f6992dad7d645852931-14" class="crayon-line crayon-striped-line">
.box-content{
</div>
<div id="crayon-5b8f6992dad7d645852931-15" class="crayon-line">
  background: #888;
</div>
<div id="crayon-5b8f6992dad7d645852931-16" class="crayon-line crayon-striped-line">
  width: 100px;
</div>
<div id="crayon-5b8f6992dad7d645852931-17" class="crayon-line">
  height: 100px;
</div>
<div id="crayon-5b8f6992dad7d645852931-18" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f6992dad7d645852931-19" class="crayon-line">
&lt;/style&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-20" class="crayon-line crayon-striped-line">
&lt;div class=&quot;box&quot;&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-21" class="crayon-line">
  &lt;div class=&quot;box-shadow&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-22" class="crayon-line crayon-striped-line">
  &lt;div class=&quot;box-content&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-23" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

inner-box-shadow
特点:阴影落在元素的padding box之内。
实现原理(纯个人理解):

  1. 创建一个与元素padding box尺寸一致的阴影盒子;
  2. 将阴影盒子定位到于元素padding box重合,并位于元素之上;
  3. 水平和垂直各画两条线,分别跟元素padding
    edge重合;(共4条分别记为left/top/right/bottom-guideline)
  4. 根据horizontal offsetvertical offset移动left/top/right/bottom-guideline。
  5. 根据spread distance移动4条线。spread
    distance为正数时,left-guideline向右移动,top-guideline向下移动,right-guideline向左移动和bottom-guidelien向上移动;spread
    distance为负数时,则相反。
  6. 根据blur radius加工元素各padding edge至其对应的guideline间的区域.
  7. 对阴影盒子进行剪裁
    1. 剪切掉不与元素padding box重叠的部分;
    2. 仅显示元素各padding edge至其对应的guideline间的区域。
      图片 9
    XHTML

    &lt;style type="text/css"&gt; .box{ float: left; background:
    \#888; width: 100px; height: 100px; margin-right: 10px; } .box1{
    box-shadow: 0 0 0 20px red inset; } .box2{ box-shadow: 10px 0 0
    20px red inset; } .box3{ box-shadow: 10px 0 10px 20px red inset;
    } .box4{ box-shadow: 0 0 10px 50px red inset; } &lt;/style&gt;
    &lt;div class="box box1"&gt;&lt;/div&gt; &lt;div class="box
    box2"&gt;&lt;/div&gt; &lt;div class="box box3"&gt;&lt;/div&gt;
    &lt;div class="box box4"&gt;&lt;/div&gt;

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-9">
    9
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-10">
    10
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-11">
    11
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-12">
    12
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-13">
    13
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-14">
    14
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-15">
    15
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-16">
    16
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-17">
    17
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-18">
    18
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-19">
    19
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-20">
    20
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-21">
    21
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-22">
    22
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-23">
    23
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-24">
    24
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-25">
    25
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6992dad81873995032-1" class="crayon-line">
    &lt;style type=&quot;text/css&quot;&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-2" class="crayon-line crayon-striped-line">
    .box{
    </div>
    <div id="crayon-5b8f6992dad81873995032-3" class="crayon-line">
      float: left;
    </div>
    <div id="crayon-5b8f6992dad81873995032-4" class="crayon-line crayon-striped-line">
      background: #888;
    </div>
    <div id="crayon-5b8f6992dad81873995032-5" class="crayon-line">
      width: 100px;
    </div>
    <div id="crayon-5b8f6992dad81873995032-6" class="crayon-line crayon-striped-line">
      height: 100px;
    </div>
    <div id="crayon-5b8f6992dad81873995032-7" class="crayon-line">
      margin-right: 10px;
    </div>
    <div id="crayon-5b8f6992dad81873995032-8" class="crayon-line crayon-striped-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-9" class="crayon-line">
    .box1{
    </div>
    <div id="crayon-5b8f6992dad81873995032-10" class="crayon-line crayon-striped-line">
      box-shadow: 0 0 0 20px red inset;
    </div>
    <div id="crayon-5b8f6992dad81873995032-11" class="crayon-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-12" class="crayon-line crayon-striped-line">
    .box2{
    </div>
    <div id="crayon-5b8f6992dad81873995032-13" class="crayon-line">
      box-shadow: 10px 0 0 20px red inset;
    </div>
    <div id="crayon-5b8f6992dad81873995032-14" class="crayon-line crayon-striped-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-15" class="crayon-line">
    .box3{
    </div>
    <div id="crayon-5b8f6992dad81873995032-16" class="crayon-line crayon-striped-line">
      box-shadow: 10px 0 10px 20px red inset;
    </div>
    <div id="crayon-5b8f6992dad81873995032-17" class="crayon-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-18" class="crayon-line crayon-striped-line">
    .box4{
    </div>
    <div id="crayon-5b8f6992dad81873995032-19" class="crayon-line">
      box-shadow: 0 0 10px 50px red inset;
    </div>
    <div id="crayon-5b8f6992dad81873995032-20" class="crayon-line crayon-striped-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-21" class="crayon-line">
    &lt;/style&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-22" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;box box1&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-23" class="crayon-line">
    &lt;div class=&quot;box box2&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-24" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;box box3&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-25" class="crayon-line">
    &lt;div class=&quot;box box4&quot;&gt;&lt;/div&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>


    模拟一下:  
    ![](http://images2015.cnblogs.com/blog/347002/201605/347002-20160510113522218-505856286.png)  



    XHTML

    &lt;style type="text/css"&gt; .box-shadow{ position: relative;
    display: inline-block; background: red; overflow: hidden; } .bg{
    position: absolute; background: \#888; left: 30px; right: 10px;
    top: 20px; bottom: 20px; } .content{ position: relative;
    z-index: 1; width: 80px; height: 80px; padding: 20px; }
    &lt;/style&gt; &lt;div class="box-shadow"&gt; &lt;div
    class="bg"&gt;&lt;/div&gt; &lt;div
    class="content"&gt;&lt;/div&gt; &lt;/div&gt;

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-9">
    9
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-10">
    10
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-11">
    11
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-12">
    12
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-13">
    13
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-14">
    14
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-15">
    15
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-16">
    16
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-17">
    17
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-18">
    18
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-19">
    19
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-20">
    20
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-21">
    21
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-22">
    22
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-23">
    23
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-24">
    24
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-25">
    25
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-26">
    26
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-27">
    27
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6992dad85377374128-1" class="crayon-line">
    &lt;style type=&quot;text/css&quot;&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-2" class="crayon-line crayon-striped-line">
    .box-shadow{
    </div>
    <div id="crayon-5b8f6992dad85377374128-3" class="crayon-line">
      position: relative;
    </div>
    <div id="crayon-5b8f6992dad85377374128-4" class="crayon-line crayon-striped-line">
      display: inline-block;
    </div>
    <div id="crayon-5b8f6992dad85377374128-5" class="crayon-line">
      background: red;
    </div>
    <div id="crayon-5b8f6992dad85377374128-6" class="crayon-line crayon-striped-line">
      overflow: hidden;
    </div>
    <div id="crayon-5b8f6992dad85377374128-7" class="crayon-line">
    }
    </div>
    <div id="crayon-5b8f6992dad85377374128-8" class="crayon-line crayon-striped-line">
    .bg{
    </div>
    <div id="crayon-5b8f6992dad85377374128-9" class="crayon-line">
      position: absolute;
    </div>
    <div id="crayon-5b8f6992dad85377374128-10" class="crayon-line crayon-striped-line">
      background: #888;
    </div>
    <div id="crayon-5b8f6992dad85377374128-11" class="crayon-line">
      left: 30px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-12" class="crayon-line crayon-striped-line">
      right: 10px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-13" class="crayon-line">
      top: 20px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-14" class="crayon-line crayon-striped-line">
      bottom: 20px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-15" class="crayon-line">
    }
    </div>
    <div id="crayon-5b8f6992dad85377374128-16" class="crayon-line crayon-striped-line">
    .content{
    </div>
    <div id="crayon-5b8f6992dad85377374128-17" class="crayon-line">
      position: relative;
    </div>
    <div id="crayon-5b8f6992dad85377374128-18" class="crayon-line crayon-striped-line">
      z-index: 1;
    </div>
    <div id="crayon-5b8f6992dad85377374128-19" class="crayon-line">
      width: 80px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-20" class="crayon-line crayon-striped-line">
      height: 80px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-21" class="crayon-line">
      padding: 20px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-22" class="crayon-line crayon-striped-line">
    }
    </div>
    <div id="crayon-5b8f6992dad85377374128-23" class="crayon-line">
    &lt;/style&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-24" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;box-shadow&quot;&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-25" class="crayon-line">
      &lt;div class=&quot;bg&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-26" class="crayon-line crayon-striped-line">
      &lt;div class=&quot;content&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-27" class="crayon-line">
    &lt;/div&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

  布局思路

    一般我们都会把一个页面分为三部分,我们把最上面的设备监控是头部

    内容部分为中间的那一大堆

    底部就是下面的三个按钮的那一些

  布局思路大概是下面的代码那个样子的,中间的部分肯定是要自适应的了,直接把剩下的高度都占满。

  

#box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header{
    height: 100px;
}
.content{
    flex-grow: 1;   // 这里的这个属性  因为之前用这个用的少,所以没有想到,这个属性是定义项目放大比例,默认是0,将他规定一下,然后就会把剩余的空间都给占掉
}
.footer{
    height: 200px;
}


<div id="box">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

 

  重点的是中间的那一部分,因为中间部分下面的表格部分超出之后要出现滚动条,所以就是表格内容的高度的父元素的高度我拿不准,最开始直接用的是rem给写死了,后来发现有很多弊端,因为是第一次写这样的页面所以讲下面的那个没有考虑到的属性。

  中间的部分分为两部分,黄色的一部分,六个框框,用的弹性盒子,把他们的宽度写成百分比平分,三个分一行,用的33.3%,

  大概代码就是下面的样子的。

  

ul{
    display: flex;
    flex-wrap: wrap;
}
ul li{
    width: 33.3%;
    height: xxx;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

  下面的那个表格要超出出现滚动条,刚才说了我第一次布局的过程中把他父元素的高度给写死了,然后在自适应的过程中出现了一些问题,可以把中间的部分也写成一个弹性盒子,然后上面的那个八个黄色框框的父元素高度给定住,然后下面的部分用到那个flex-grow属性,直接把下面的那一些东西都给占住。

  大概和最开始头部中间部分底部的布局差不多。

  图片 10

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注