CSS基础——样式效果

1.圆角： border-radius

   渐变：background-image: linear-gradient

#d1{
　　width:100px;
　　height: 100px;
　　background: rgba(78,34,89,1.00);
　　border: 1px solid rgba(211,105,107,1.00);
　　border-radius: 50px;
　　background-image: linear-gradient(red,blue);
}

2.移动：ransform: translate

  过渡：transition: 

#d1:hover{
　　transform: translate(200px,200px);
　　transition: transform 5s;
}

3.旋转：transform:rotate

#d2{
　　width:100px;
　　height: 100px;
　　background: rgba(175,204,178,1.00);
}

#d2:hover{
　　transform:rotate(360deg);
　　transition: transform 5s;
}

4.放大：transform:scale

#d3{
　　width: 74px;
　　height: 82px;
　　background: rgba(199,191,191,1.00);
　　overflow: hidden;
}

#d3 img:hover{
　　transform:scale(1.5,1.5);
　　transition: transform 5s;
}

5.沿x轴翻转：transform: rotateX

#d4{
　　width: 200px;
　　height: 100px;
　　background: rgba(136,217,127,1.00);
}

#d4:hover{
　　transform: rotateX(360deg);
　　transition: transform 5s;
}

CSS基础——样式效果

原文：https://www.cnblogs.com/weirongqi/p/15185246.html