圆角 阴影 透明度
圆角
border-top-left-radius: 100px 50px; 左上角为椭圆圆角
border-top-right-radius: 100px;左、右上角为正圆圆角
border-radius 圆角
border-radius:20px 60px 80px 100px;设置四个角
border-radius:50%; 设置四个圆角相同（正圆）
border-radius: 40px;曲率半径为40的圆角矩形
border-radius: 20%;最大200px，20%即40px
阴影
水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影（默认是内阴影 inset是外阴影）
box-shadow：h-shadow v-shadow blur spread color inset;
box-shadow:0px 0px 20px 2px red inset;
透明度
透明度30%，文字也透明了（0-1 可以设置颜色的都可以加）
opacity:0.3;
背景色变透明，但文字不会透明
background-color:rgba(255,215,0,0.3);
边框透明
border:2px solid rgba(0,0,0,0.3);
filter:alpha(opacity=30); 兼容IE
rgba：rgba（0，0，0，0.1）第四个为透明度
transition动画（过渡动画 鼠标移动才会有动画）：
transition-property：设置过渡的属性 eg：{transition-property：width/height/background-color}
transition-duration：设置过渡的时间 eg：{transition-duration：500ms}
transition-timing-function：设置过渡的运动方式
transition-delay：设置动画的延迟
transition: property duration timing-function delay 同时设置四个属性
transition: width 500ms ease,height 500ms ease,background-color 500ms ease 1s
简写: transition:all 500ms ease;
运动曲线
linear：匀速
ease：开始和结束慢速
ease-in：开始是慢速
ease-out：结束时慢速
ease-in-out：开始和结束时慢速
cubic-bezier(n,n,n,n)：曲线设置，用时查找
变形（transform）
.box:hover{
transform:translate(50px,50px);
}鼠标移入时向右下角移动
.box1:hover{
transform:rotate(360deg);
} 鼠标移入然后360度旋转
.box3:hover{
transform:scale(0.5,0.2);
}鼠标移入时缩放
.box4:hover{
transform:skew(045deg);
}鼠标移入时变形
图片文字遮罩及二级菜单
图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花
图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花
图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花