1. 圆角边框（Border Radius）:
.element {
    border-radius: 10px;
}

2. 阴影（Box Shadow）:
.element {
    box-shadow: 5px 5px 10px #888888;
}

3. 过渡（Transitions）:
.element {
    transition: width 0.3s ease-in-out;
}

4. 渐变（Gradients）:
线性渐变：
.element {
    background: linear-gradient(to right, #ff0000, #00ff00);
}

径向渐变：
.element {
    background: radial-gradient(circle, #ff0000, #00ff00);
}

5. 动画（Animations）:
@keyframes move {
    0% { left: 0; }
    50% { left: 100px; }
    100% { left: 0; }
}

.element {
    animation: move 2s ease-in-out infinite;
}

6. 变换（Transform）:
.element {
    transform: rotate(45deg) scale(1.5);
}

7. 多列布局（Multiple Columns）:
.element {
    column-count: 3;
    column-gap: 20px;
}

8. 响应式设计（Media Queries）:
@media screen and (max-width: 600px) {
    .element {
        font-size: 14px;
    }
}

9. 字体图标（Font Icons）:
@font-face {
    font-family: 'FontAwesome';
    src: url('fontawesome-webfont.woff2') format('woff2');
}

.element {
    font-family: 'FontAwesome';
    content: '\f007'; /* Unicode character for the icon */
}

这只是一个简要的CSS3备忘录，涵盖了一些常见的特性。请根据实际需求深入了解这些属性的用法和潜在效果。


转载请注明出处：http://www.zyzy.cn/article/detail/4081/CSS