css中box-shadow属性 CSS3 box-ordinal-group 属性

css中box-shadow属性

box-shadow属性是CSS3中的一个新属性，它可以给元素添加阴影效果。它可以让元素看起来更加立体，使得页面更加有趣。

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow属性由6个参数组成，分别是水平阴影位置h-shadow、垂直阴影位置v-shadow、模糊距离blur、扩散距离spread、阴影颜色color以及内外阴影inset。

h-shadow和v-shadow用来控制阴影的位置，它们的单位是px，正数表示向右或者向下，负数表示向左或者向上。blur和spread用来控制阴影的大小，blur表示模糊半径，spread表示扩散半径。color用来控制阴影的颜色，inset表明是内部还是外部的阴影。

box-shadow: 10px 10px 5px #ccc;

上述代码中h-shadow为10px,v-shadow也为10px,blur为5px,spread为0,color为#ccc,inset不写时表明外部的阴影。这样就会在元素外部产生一个水平偏10px,垂直偏10px,模糊半径5px,浅浅的#ccc色的外部阴影。

CSS3 box-ordinal-group 属性

实例

指定的一个box的子元素的显示顺序：

.box
{
display:-ms-flexbox;
display:-moz-box;
display:-webkit-box;
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-ms-flex-order:1;
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-ms-flex-order:2;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}