《HTML5与CSS3权威指南 下册》读书笔记（3）

《HTML5与CSS3权威指南 下册》读书笔记（3）

第26章 布局相关样式

多栏布局

使用float或position

缺点：第一个div元素与第二个div元素是各自独立的，因此，如果第一个div元素中加入内容，将会是两个元素的底部不能对齐，导致页面中多出一块空白区域。

<style type="text/css">
    div{
        width:20em;
        float:left;
    }
    div#div1{
        margin-rgiht:2em;
    }
    
</style>
<div id="div1">
    <img src="test.png">
   <p>
      测试文字…… 
    </p> 
</div>
<div id="div2">
   <p>
      测试文字…… 
    </p> 
</div>

使用多栏布局方式

将一个元素的内容分为多栏显示，并且确保各栏中的内容底部对齐;

column-count：将一个元素中的内容分为多兰进行显示。

<style type="text/css">
div#div1{
    width:40em;
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
}

</style>
<div id="div1">
    <img src="test.png">
    <p>
        测试文字……
    </p>
    <p>
        测试文字……
    </p>
</div>

使用多栏布局时，需要将元素的宽度设置成多栏目的总宽度，与使用float与position时区别：

• 使用float与position时只需单独设定每个元素的宽度即可，

• 使用多栏布局时需设定元素中多个栏目相加后的总宽度。

column-width属性单独设置每一栏的宽度而不设定元素的宽度

div#div1{
   column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-width:20em;
    -moz-column-width:20em;
    -webkit-column-width:20em;
}

如果使用column-width属性指定每栏宽度而不设定元素宽度，则需要在元素外贸单独设立一个容器元素，然后指定容器元素的宽度。

<style type="text/css">
    div#container{
        width:42em;
    }
div#div1{
    width:40em;
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
}

</style>
<div id="container">
<div id="div1">
    <img src="test.png">
    <p>
        测试文字……
    </p>
    <p>
        测试文字……
    </p>
</div>
    </div>

column-gap设定多栏之间的间隔距离。

div#div1{
   column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-width:20em;
    -moz-column-width:20em;
    -webkit-column-width:20em;
    column-gap:2em;
    -moz-column-gap:2em;
    -webkit-column-gap:2em;
}

column-rule在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、颜色等，与border属性值相同

div#div1{
   column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-width:20em;
    -moz-column-width:20em;
    -webkit-column-width:20em;
    column-gap:2em;
    -moz-column-gap:2em;
    -webkit-column-gap:2em;
    column-rule:solid 1px gray;
    -moz-column-rule:solid 1px gray;
     -webkit-column-rule:solid 1px gray;
}

盒布局

<style type="text/css">
#leftbar{
    float:left;
    width:200px;
    padding:20px;
    background:orange;
}
#content{
    float:left;
    width:300px;
    padding:20px;
    background:yellow;
}
#rightbar{
    float:left;
    width:200px;
    padding:20px;
    background:limegreen;
}
#leftbar,#content,#rightbar{
    box-sizing:border-box;
}
</style>
<div id="container">
    <div id="leftbar">
        leftbar……
    </div>
    <div id="content">
        content……
    </div>
    <div id="rightbar">
        rightbar……
    </div>
</div>

box：盒布局，解决float或position底部不对齐问题

#container{
    display:-moz-box;
    display:-webkit-box;
}
#leftbar{
    width:200px;
    padding:20px;
    background:orange;
}
#content{
    width:300px;
    padding:20px;
    background:yellow;
}
#rightbar{
    width:200px;
    padding:20px;
    background:limegreen;
}
#leftbar,#content,#rightbar{
    box-sizing:border-box;
}

盒布局与多栏布局的区别

• 多栏布局的各栏宽度必须相等，在指定每栏宽度时，也只能为所有栏指定一个统一宽度，栏与栏之间宽度不可能是一样的。
• 多栏布局不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容时，不适合用于排版页面元素结构。

#container{
   column-count:3;
    -moz-column-count:3;
    -webkit-column-count:3;
}
#leftbar{  
    padding:20px;
    background:orange;
}
#content{
    padding:20px;
    background:yellow;
}
#rightbar{
    padding:20px;
    background:limegreen;
}
#leftbar,#content,#rightbar{
    box-sizing:border-box;
}

弹性盒布局

对多个元素使用flex属性

三个div元素的总宽度等于浏览器窗口的宽度，而且能够随着窗口宽度的改变而改变

#container{
    display:flex;
}
#leftbar{
    width:200px;
    padding:20px;
    background:orange;
}
#content{
    flex:1;
    padding:20px;
    background:yellow;
}
#rightbar{
    width:200px;
    padding:20px;
    background:limegreen;
}
#leftbar,#content,#rightbar{
    box-sizing:border-box;
}

改变元素的显示顺序order

#container{
    display:flex;
}
#leftbar{
    order:3;
    width:200px;
    padding:20px;
    background:orange;
}
#content{
     order:1;
    flex:1;
    padding:20px;
    background:yellow;
}
#rightbar{
     order:2;
    width:200px;
    padding:20px;
    background:limegreen;
}
#leftbar,#content,#rightbar{
    box-sizing:border-box;
}

改变元素的排列方向flex-direction

• row:横向排列(默认)
• row-reverse:横向反向排列
• column：纵向排列
• column-reverse：纵向反向排列

#container{
    display:flex;
    flex-direction:column;
}
#leftbar{
    order:3;
    width:200px;
    padding:20px;
    background:orange;
}
#content{
     order:1;
    flex:1;
    padding:20px;
    background:yellow;
}
#rightbar{
     order:2;
    width:200px;
    padding:20px;
    background:limegreen;
}
#leftbar,#content,#rightbar{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

元素宽度与高度自适应

水平方向排列时，子元素的宽度为元素中内容的宽度，高度自动变为容器的高度

垂直方向排列时，子元素的高度为元素中内容的高度，宽度自动变为容器的宽度

#container{
    display:flex;
    flex-direction:row;
    width:100%:
    height:400px;
}

使用弹性盒布局来消除空白flex

让多个参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

#container{
    flex-direction:flex;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
    width:100%;
    height:400px;
}
#container>div{
    flex:1;//将空白部分等分到子元素中
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

box-flex属性的元素宽度与高度总会自动扩大，使得参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

对多个元素使用flex属性

#container{
   display:flex;
    flex-direction:column;
    width:500px;
    height:500px;
}
#container>div#div1{
    flex:1;//将空白部分1/4分到子元素div1中
    background-color:red;   
}
#container>div#div2{
    flex:2;//将空白部分1/2分到子元素div2中
    background-color:green;   
}
#container>div#div3{
    flex:1;
    background-color:blue;   
}

flex-grow:指定元素自适应的宽度或高度

#container{
   display:flex;
    flex-direction:row;
    width:600px;
    height:300px;
}
#container>div{
    flex-grow:1;
    width:150px;
}
#container>div#div1{  
    background-color:red;   
}
#container>div#div2{
     flex-grow:3;
    background-color:green;   
}
#container>div#div3{    
    background-color:blue;   
}

【 flex-grow计算元素宽度过程】

• 600（容器宽度）-150*3（3个div子元素的总宽度）=150
• 150/5(三个div子元素宽度的flex-grow属性值的总和)=30
• 第一个和第三个div子元素宽度等于150（其width样式属性值）+30*1（其flex-grow样式属性值）=180
• 第二个子元素宽度等于150（其width样式属性值）+30*3（其flex-grow样式属性值）=240

flex-shrink：指定元素自适应的宽度或高度

#container{
   display:flex;
    flex-direction:row;
    width:600px;
    height:300px;
}
#container>div{
    flex-shrink:1;
    width:250px;
}
#container>div#div1{  
    background-color:red;   
}
#container>div#div2{
     flex-shrink:3;
    background-color:green;   
}
#container>div#div3{    
    background-color:blue;   
}

【 flex-shrink计算元素宽度过程】

• 250*3（3个div子元素的总宽度）-600（容器宽度）=150
• 150/5(三个div子元素宽度的flex-shrink属性值的总和)=30
• 第一个和第三个div子元素宽度等于250（其width样式属性值）-30*1（其flex-shrink样式属性值）=220
• 第二个子元素宽度等于250（其width样式属性值）-30*3（其flex-shrink样式属性值）=160

flex-basis:指定调整前的子元素宽度

flex-shrink与flex-grow区别

• flex-grow当子元素的宽度或高度总和小于容器的宽度或高度总和时，增加子元素宽度或高度填满容器。
• flex-shrink当子元素的宽度或高度总和大于容器的宽度或高度总和时，减少子元素宽度或高度填满容器。
• flex将三个属性结合，格式：flex:flex-grow flex-shrink flex-basis

#container{
   display:flex;
    flex-direction:row;
    width:600px;
    height:300px;
}
#container>div{
    flex:250px;//flex:0 0 250px;
}
#container>div#div1{ //220px 
    background-color:red;   
}
#container>div#div2{//160px 
     flex:1 3 250px;
    background-color:green;   
}
#container>div#div3{  //220px   
    background-color:blue;   
}

控制换行方式flex-wrap

• nowrap:不换行
• wrap：换行
• wrap-reverse：反方向换行

#container{
   display:flex;
    flex-direction:row;
    width:600px;
    height:300px;
    flex-wrap:wrap;
}
#container>div{
    wdith:250px;
}

#container{
    flex-direction:row;
    flex-wrap:wrap;
}
//等价于
#container{
    flex-flow:row wrap;
}

弹性盒布局中的一些专用术语

• main axis:进行布局时作为布局基准轴，在横向布局时为水平轴（从左中点到右中点），在纵向布局时为垂直轴（从上中点到下中点）
• main-start/main-end:进行布局时的布局起点与布局终点，在横向布局时为容器的左端与右端，在纵向布局时为容器的顶端与底端
• cross axis：与main axis垂直相交的轴，在横向布局时为垂直轴（从上中点到下中点），在纵向布局时为水平轴（从左中点到右中点）
• cross-start/cross-end:cross axis轴的起点与终点，在横向布局时为容器的顶端与底端，在纵向布局时为容器的左端与右端。将flex-wrap属性设定为wrap且进行横向多行布局时，按从cross-start到cross-end方向，即从上往下布局，将flex-wrap属性值指定为wrap-reverse且进行横向多行布局时，按从cross-end到cross-start方向，即从下往上布局。

justify-content

指定如何布局容器中除了子元素外的main axis轴方向（横向布局时main axis为水平方向，纵向布局时main axis为垂直方向）的剩余空白部分。

当flex-grow属性值不为0时，各子元素在main axis轴方向上自动填满容器，所以justify-content属性值无效。

• flex-start:从main-start开始布局所有子元素（默认）
• flex-end:从main-end开始布局所有子元素
• center:居中布局所有子元素
• space-between:将第一个子元素布局在main-start处，将最后一个子元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间。
• space-around:将空白部分平均分配在main-start与第一个子元素之间，各子元素与子元素之间，最后一个子元素与main-end之间

align-items

指定子元素的cross axis轴方向（横向布局时cross axis为垂直方向，纵向布局时cross axis为水平方向）对齐方式。

• flex-start:从cross-start开始布局所有子元素（默认）
• flex-end:从cross-end开始布局所有子元素
• center:居中布局所有子元素
• baseline:如果子元素的布局方向与容器的布局方向不一致，该值的作用等效于flex-start。若一致则所有子元素的内容沿基线对齐。
• stretch:同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度（当考虑元素边框及内边距时，当边框宽度与内边距均为0则等于容器高度）

align-self

• auto:继承父元素的align-items属性值
• 其他属性值与align-items相同

align-items与align-self区别：

• align-items指定所有子元素的对齐方式，align-self单独指定某些子元素的对其方式。

#container{
    display:flex;
    flex-direction:row;
    align-items:center;
}
#container>div#div1{
    align-self:flex-end;
}

align-content

当进行多行布局时，指定各行的对齐方式。

与align-items区别：align-items指定子元素的对齐方式，align-content指定行对其方式。

• flex-start:从cross-start开始布局所有行（默认）
• flex-end:从cross-end开始布局所有行
• center:居中布局所有行
• space-between:将第一个行布局在cross-start处，将最后一个行布局在cross-end处，将空白部分平均分配在各行之间。
• space-around:将空白部分平均分配在cross-start与第一行之间，各行之间，最后一行与cross-end之间

calc方法

通过使用该方法来自动计算元素的宽度、高度等数值类型。

#div1{
    width:calc(50% - 100px);
}

第27章 Media Queries相关样式

根据浏览器的窗口大小来选择使用不同的样式

body{
    margin:20px 0;
}
#container{
    width:900px;
    margin:auto;
}

#container>div#main{
    width:600px;
    background-color:yellow;
    float:right;
    
}
#container>div#menu{
    width:300px;
    background-color:orange;
    float:left;
}

@media screen and (min-width:1000px){
    #container{
    width:1000px;
    margin:auto;
}

#container>div#main{
    width:700px;
    background-color:yellow;
    float:right;
    
}
#container>div#menu{
    width:300px;
    background-color:orange;
    float:left;
}
}

@media screen and (min-width:640px) and (max-width:999px){
    #container{
    width:640px;
    margin:auto;
}

#container>div#main{
    width:400px;
    background-color:yellow;
    float:right;
    
}
#container>div#menu{
    width:240px;
    background-color:orange;
    float:left;
}
}

@media screen and (max-width:639px) {
    #container{
    width:100%;
}

#container>div#main{
    width:100%;
    background-color:yellow;
    float:none;
    
}
#container>div#menu{
    width:100%;
    background-color:orange;
     float:none;
}
}

在iPhone中的显示

iphone分辨率宽度是小于600px，但真正运行时浏览器中显示却显示两栏。

原因是Safari浏览器在进行页面显示时将窗口宽度作为980px显示。因为大多网页安装宽度为800px作为的标准进行制作，所以Safari浏览器如果按照980px的宽度来显示，就可以正常显示绝大多数网页了。所以即使在页面中已经写好了页面在小尺寸窗口中运行的样式，iPhone中的Safari浏览器也不会使用这个样式，而是选择窗口宽度为980px时所使用的样式。

在这种情况下，可以使用<meta>标签在页面中指定Safari浏览器在处理本页面时按照多少像素的窗口来进行

<meta name="viewport" content="width=600px">

Media Queries的使用方法

@media 设备类型 and (设备特性){样式代码}

Media Queries设备类型

可指定的值	设备类型
all	所有设备
screen	电脑显示器
print	打印用纸或打印预览视图
handheld	便携设备
tv	电视机类型的设备
speech	语音或视频合成器
braille	盲人用点字法触觉回馈设备
embossed	盲文打字机
projection	各种投影设备
tty	使用固定密度字母栅格的媒介，如电传打印机和终端

13种设备特性的说明

特性	可指定值	是否允许使用min/max前缀	特性说明
width	带单位的长度数值，如600px	允许	浏览器窗口的宽度
height	带单位的长度数值，如600px	允许	浏览器窗口的高度
device-width	带单位的长度数值，如600px	允许	设备屏幕分辨率的宽度值
device-height	带单位的长度数值，如600px	允许	设备屏幕分辨率的高度值
orientation	只能指定两个值：portrait或lanscape	不允许	浏览器窗口方向是纵向还是横向。当窗口大高度大于等于宽度值时，该特性为portrait否则为landscape
aspect-ratio	比例值，如16/9	允许	浏览器窗口的纵横比，比例至为浏览器的窗口的宽度值/高度值
device-aspect-ratio	比例值，如16/9	允许	屏幕分辨率的纵横比，比例值为设备分辨率的宽度值/高度值
color	整数值	允许	设备使用多少位的颜色值，如果不是彩色设备，该值为0
color-index	整数值	允许	色彩表中的色彩数
monochrome	整数值	允许	单色 帧缓冲器中每像素的字节数
resolution	分辨率值，比如300dpi	允许	设备的分辨率
scan	只能指定两个值：progressive或interlace	不允许	电视机类型设备的扫描方式。progressive表示逐行扫描，interlace表示隔行扫描
grid	只能指定两个值：0或1	不允许	设备是基于栅格1还是基于位图0。

not关键词表示对后面的表达式执行取反操作

//样式将被使用在除便携设备之外的其他设备或非彩色便携设备中
@media not handheld and(color){}
//样式将被使用在所有非彩色设备中
@media all and (not color){}

only让那些不支持Media Queries但能够读懂Media Type的设备浏览器将表达式隐藏起来。

@media only screen and (color){}

引用外部样式

@import url(style.css) screen and (min-width:1000px);

<link rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" href="style.css" />

第28章 CSS3的其他重要样式和属性

颜色相关的样式

利用alpha通道来设定颜色

RGBA：R（红），G（绿），B（蓝），A（alpha通道值）

alpha通道值范围0~1.0,0表示完全透明，1表示不透明

background-color:rgba(255,0,0,0.5);

background-color:rgb(255,0,0);
//等价于
background-color:rgba(255,0,0,1);

Safari，Firefox，Chrome，Opera都支持RGBA，IE不支持，将忽略RGBA颜色值的支持

对HSL颜色设定alpha通道

HSL：H（色调），S（饱和度），L（亮度）

色调中用0或360表示红色，120表示绿色，240表示蓝色，当取值大于360时，实际值等于该值除以360之后的余数，如480，实际为120

饱和度和亮度的取值范围均为0%到100%

HSLA：H（色调），S（饱和度），L（亮度），A（alpha通道值）

background-color:hsla(0,100%,100%,0.5);

background-color:hsl(0,100%,100%);
background-color:hsla(0,100%,100%,1);

Firefox，Chrome，Opera都支持HSL和HSLA

alpha通道与opacity属性区别

opacity指定透明度，取值范围0~1,0表示完全透明，1表示不透明，只能指定整个元素的透明度

alpha通道对元素设定透明度时，可单独针对元素的背景色和文字颜色等指定透明度。

指定颜色值transparent

颜色值设为transparent，则会将颜色设为完全透明，相当于alpha为0

用户界面相关样式

轮廓相关样式

outline在元素周围绘制一条轮廓线，起到突出元素的作用。

outline:red solid thin;//类似border属性

outline-color:red;
outline-style:solid;
outline-width:thin;//thin,medium(默认)，thick，或具体轮廓宽度10px

outline-set让轮廓线向外偏离距离，绘制出双层边框效果,负值时轮廓线将向内偏离，绘制在边框内部。

outline-set:4px;

resize允许用户通过拖动的方式修改元素的尺寸，主要用于使用overflow属性的任何容器元素中。

• none：用户不能修改元素尺寸
• both：用户可以修改元素的宽度和高度
• horizontal：用户可以修改元素的宽度，不能修改高度
• vertical：用户可以修改元素的高度，不能修改宽度
• inherit：继承父元素的resize属性值

#div1{
    background:pink;
    overflow:auto;
    resize:both;
    height:100px;
    width:100px;
}

使用initial属性取消对元素的样式指定

【取消对元素的样式指定方法】

• 直接在样式表中删除设定的该样式代码
• 删除某个class
• initial属性

p{
    color:blue;
}
p#text1{
    color:-moz-initial;
    color:initial;
}

initial属性值的作用是让各种属性使用默认值，在浏览器中文字默认为黑色，p#text1的文字颜色变为黑色。

使用initial属性值并不等于取消样式设定的特例

个别情况下，对元素使用initial属性值后的显示结果并不等于将该元素的样式设定直接删除后的结果。

h1{
    font-size:3em;
    font-weight:normal;
}
h1#text1{//结果为不添加任何样式的文字
    font-size:initial;
    font-weight:initial;
    font-size:-moz-initial;
    font-weight:-moz-initial;
}

追加initial后，h1元素的字号和字体粗细均使用css对字号和字体粗细的默认值，并不考虑浏览器对h1追加样式。

实现CSS 3中的滤镜特效

滤镜特效源于SVG（Scalable Vector Graphics，可缩放矢量图形）标准，在SVG标准中，滤镜特效被用于对一个矢量图形图像应用一些基于像素的图像特效。

filter

• grayscale滤镜（灰度滤镜）：使用一个数值或数值百分比作为参数，用于控制图像灰度，如果值为100%，则图像变成黑白图像，如果该值为0%，则图像不做任何修改，仍然为彩色图像。可使用浮点数作为属性值，0代表0%，1代表100%；

div{
    filter:grayscale(50%);
    -moz-filter:grayscale(50%);
    -webkit-filter:grayscale(50%);
}

• sepia滤镜：为彩色图像添加一层棕褐色色调，使其呈现出老照片的效果。使用一个数值或数值百分比作为参数，用于控制棕褐色色调的浓度。如果值为100%，则图像呈现出黑白色老照片的效果，如果该值为0%，则图像不做任何修改，仍然彩色图像。可使用浮点数作为属性值，0代表0%，1代表100%；

div{
    filter:sepia(50%);
    -moz-filter:sepia(50%);
    -webkit-filter:sepia(50%);
}

• saturate滤镜（饱和度滤镜）：增强彩色图像的饱和度，使彩色变得更加鲜艳，使照片呈现海报或卡通效果。可以使用一个大于100%的百分比作为参数来增强色彩饱和度，也可使用小于100%的百分比作为参数来削弱色彩的饱和度。

div{
    filter:saturate(150%);
    -moz-filter:saturate(150%);
    -webkit-filter:saturate(150%);
}

• hue-rotate滤镜：用于产生特殊的视觉效果，将颜色光谱摄像为一个从红色到紫色的颜色光环，概率就将凸显中的所有颜色严光环旋转一个角度。样式属性中使用一个角度值（如90deg）作为参数，参数值代表图像颜色沿颜色环旋转的角度。

div{
    filter:hue-rotate(90deg);
    -moz-filter:hue-rotate(90deg);
    -webkit-filter:hue-rotate(90deg);
}

• invert滤镜（颜色翻转滤镜）:将乳品颜色翻转，使用百分比作为数值参数，定义图像颜色翻转成都，当参数值为100%时对图像进行反相处理。

div{
    filter:invert(100%);
    -moz-filter:invert(100%);
    -webkit-filter:invert(100%);
}

• opacity滤镜（透明度滤镜）：为图像产生透明或半透明效果，使用一个百分比数值或浮点数作为参数，用于定义图像的透明度，当参数值为100%时图像为完全不透明，即不对图像进行修改。当参数值越小时透明度越高，意味着被使用滤镜的元素叠放在其他元素之上时其他元素将变得越清晰。当参数值降为0时被使用滤镜的元素变为完全透明（即完全消失），但仍可捕捉到该元素的事件，等同于opacity样式属性。opacity属性不具有硬件加速特性，而在某些浏览器中当使用opacity滤镜时将利用硬件加速特性，因而拥有更高的页面性能。

div{
    filter:opacity(50%);
    -moz-filter:opacity(50%);
    -webkit-filter:opacity(50%);
}

• contrast滤镜（对比度滤镜）：可以在全黑与原图像亮度之间调整图像的对比度。使用一个数值或数值百分比作为参数，用于定义图像的对比度。如果值为0%，则图像全黑效果，参数从0%到100%中，图像对比度将变得越来越强，如果值为100%，则图像变为原图对比度。数值可大于100%，当参数200%是对比度为原图对比度2倍

div{
    filter:contrast(150%);
    -moz-filter:contrast(150%);
    -webkit-filter:contrast(150%);
}

• blur滤镜（模糊滤镜）：在图像上添加一层玻璃遮罩，使图像具有一种烟雾效果。使用一个带有像素值单位的整数值，用于指定图像的模糊度。参数值为0时图像不发生变化。

div{
    filter:blur(2px);
    -moz-filter:blur(2px);
    -webkit-filter:blur(2px);
}

• drop-shadow滤镜（阴影滤镜）：为图像添加一层阴影效果，像是太阳照在图像上使其产生一个影子。滤镜为原图产生一个快照，使其颜色单一化并将其模糊，然后将模糊结果进行偏离，使其看起来就像一个阴影，参数与box-shadow相同。

div{
    filter:drop-shadow(4px -4px 6px purple);
    -moz-filter:drop-shadow(4px -4px 6px purple);
    -webkit-filter:drop-shadow(4px -4px 6px purple);
}