-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
2015-08-19
/*这个样式包含两层box-shadow,.effect上的div的前(before)后(after)都添加一个空元素,然后为这两个空元素添加阴影特效,则此时就会出现阴影叠加效果*/
.effect::before, .effect::after{
content:""; position:absolute; z-index:-1;
/*阴影x轴偏移0px,y轴偏移0px,阴影的模糊半径10px,阴影的延伸半径10px,颜色蓝色,透明度0.8*/
box-shadow:0 0 10px 10px rgba(0,0,255,0.8);
}
.effect::before, .effect::after{
content:""; position:absolute; z-index:-1;
/*阴影x轴偏移0px,y轴偏移0px,阴影的模糊半径10px,阴影的延伸半径10px,颜色蓝色,透明度0.8*/
box-shadow:0 0 10px 10px rgba(0,0,255,0.8);
}
2015-08-18
给大家解释写里面的样式意义:
/*这个样式包含两层box-shadow,一层是绿色的盒子阴影,在外层,阴影模糊半径是40px,二层是红色的盒子阴影,在内层inset,阴影的模糊半径40px*/
.effect{
position:relative;
box-shadow:0 1px 40px rgba(0, 255, 0, 0.9), 0 0 40px rgba(255, 0, 0, 0.8) inset;
}
/*这个样式包含两层box-shadow,一层是绿色的盒子阴影,在外层,阴影模糊半径是40px,二层是红色的盒子阴影,在内层inset,阴影的模糊半径40px*/
.effect{
position:relative;
box-shadow:0 1px 40px rgba(0, 255, 0, 0.9), 0 0 40px rgba(255, 0, 0, 0.8) inset;
}
2015-08-18
-webkit-column-count:2;
-moz-column-count:2;
-o-column-count:2;
-ms-column-count:2;
column-count:2;
-moz-column-count:2;
-o-column-count:2;
-ms-column-count:2;
column-count:2;
2015-08-18
border-top-left: 50px;
border-bottom-left: 50px;
缩写形式
border-radius: 50px 0 0 50px;
border-bottom-left: 50px;
缩写形式
border-radius: 50px 0 0 50px;
2015-08-18
background:rgba(255,255,255,0.5); 白色十六进制:#FFFFFF 转换成rgb:255,255,255 , a=alpha 。
2015-08-17
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:50px 0px 0px 50px;
}
height:100px;
width:50px;
background:#9da;
border-radius:50px 0px 0px 50px;
}
2015-08-17
height:100px;
width:50px;
background:#9da;
border-radius:50px 0 0 50px;
width:50px;
background:#9da;
border-radius:50px 0 0 50px;
2015-08-16