常用CSS3标签及个性效果

1、圆角边框
border-radius:0.08rem;
-moz-border-radius: 0.08rem;
-webkit-border-radius: 0.08rem;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
移动端
border-radius:0.08rem;
box-sizing:border-box;

2、伪类排序
:first-child
:last-child
:nth-of-type(1)
:nth-child(odd)奇数
:nth-child(even)偶数

3、透明背景
background-color: rgba(0, 0, 0, 0.2);

4、长度截取
overflow: hidden;
max-width: 5rem; text-overflow: ellipsis;white-space: nowrap;

5、左右对齐
text-align:justify;text-justify:inter-ideograph;

6、固定2行
max-width: 4.8rem;
text-align:Justify;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

7、flex
display:flex;
justify-content:center;
align-items:center;
flex-start | flex-end
靠左 justify-content:flex-start;
靠右 justify-content:flex-end;

8、绝对定位图标
单用 vertical-align: middle; margin-bottom: 0.04rem;
定位
position: absolute;left: 0rem; top: 0rem;
display: inline-block;
width: 0.3rem;
height: 0.3rem;
box-sizing: border-box;
background: url(…/images/hc_icon.png) no-repeat;
background-size: 3rem 1.2rem;
background-position:0rem -0.3rem;

9、边框阴影
box-shadow: 0 0 0.06rem #dbdbdb;

10、文字投影
text-shadow:0.02rem 0.02rem 0.04rem #494c4f;

11、背景模糊
filter:blur(0.02rem);
-webkit-filter:blur(0.02rem);

12、背景平铺，可以自动居中
width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;

13、背景绘制区域
background-clip: border-box|padding-box|content-box;全部/盒子/内容

20、input默认显示颜色
.tt_ss_box ::-webkit-input-placeholder{ /* WebKit browsers /
color: #ccc;
}
.tt_ss_box ::-moz-input-placeholder{ / Mozilla Firefox 4 to 18 /
color: #ccc;
}
.tt_ss_box ::-ms-input-placeholder{ / Internet Explorer 10+ */
color: #ccc;
}

其他
style=“background-image: url(./images/tb_04.jpg);”
虚线dashed 点线dotted
手型 cursor:pointer