css3 最常用的案例

1. 边框效果

.box{
    border: 1px solid #ccc;
     /* 实线边框 */border-radius: 5px;
     /* 圆角边框 */box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 /* 阴影边框 */}

2. 背景效果

.box{
    background-color: #f5f5f5;
     /* 纯色背景 */background-image: url('example.png');
     /* 图片背景 */background-size: cover;
     /* 图片铺满整个容器 */background-position: center;
 /* 图片居中 */}

3. 文本效果

p{
    color: #333;
     /* 字体颜色 */font-size: 16px;
     /* 字体大小 */font-weight: bold;
     /* 字体加粗 */line-height: 1.5;
     /* 行高 */text-align: center;
     /* 居中 */text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 /* 文字阴影 */}

4. 渐变效果

.box{
    background: linear-gradient(to bottom, #f5f5f5, #ccc);
     /* 上下渐变 */background: linear-gradient(to right, #f5f5f5, #ccc);
     /* 左右渐变 */background: radial-gradient(circle at center, #f5f5f5, #ccc);
 /* 径向渐变 */}

5. 动画效果

.box{
    animation: example 1s infinite alternate;
 /* 动画名称，持续时间，重播次数，交替方向 */}
@keyframes example{
from{
     /* 起始状态 */transform: rotate(0deg);
 /* 旋转0度 */}
to{
     /* 结束状态 */transform: rotate(360deg);
 /* 旋转360度 */}
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！