css圆角 阴影 透明度 运动曲线，图片文字遮罩，二级菜单，变形

圆角 阴影 透明度

圆角

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);

}鼠标移入时变形

图片文字遮罩

二级菜单