css3及css技巧

左右对齐:

 

 

垂直对齐一幅图像：

img

{

vertical-align:middle;

}

边框阴影

设置半透明样式:

效果:

css3:改变主轴

overflow: hidden:取消坍塌

被下面卡片的margin顶下来了,导致设置的背景色没有生效

得到dom元素和边框的距离

 

 

 

类似hr中间加文字效果:

<div class="line"></div>

<p>领取优惠券</p>

.line {

height: 10px;

border-bottom: 1px #DDDDDD solid;

}

p {

position: relative;

top: -12px;

background: white;

width: auto;

display: inline;

}

可以用来缩小东西

transform: scale(0.7);

 

加一层灰色蒙层

opacity: 0.50;

 

2em=两个字体大小:如font-size*2

 

 

 

添加阴影:(可以设置背景色,显示成块状效果)

box-shadow: 0 1px 2px rgba(0,0,0,.3);