圆角边框

div{
border-radius:5px
}

鼠标悬浮手势

div{
cursor:pointer
}

文字间距调整

p{letter-spacing:8px;}

内边距、边框算在元素宽度内

div{
box-sizing:border-box; /* 主要是这一行 */
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

过渡效果

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

语法

transition: property duration timing-function delay;

奇数行、偶数行效果

odd表示奇数行，even表示偶数行;

li:nth-child(even){
    background:#f2f2f2
}

图片按中心放大

加一个过渡效果会更好

.fuchi_k:hover img{
    transform:scale(1.1)
}

给图片增加一层毛玻璃

效果挺好，直接作用于图片，也可以先让图片放大

.mao{
filter:blur(10px);
-webkit-filter:blur(10px);
-moz-filter:blur(10px);
-ms-filter:blur(10px);
-o-filter:blur(10px);
}

阴影

这里只写了一个，比较温和

.fuchi_k:hover{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
}

依次向下

li+li{margin-left:10px} 从第二个li元素开始，向左边距10px