css3边框与动画整理

最新推荐文章于 2025-10-16 13:07:10 发布

原创最新推荐文章于 2025-10-16 13:07:10 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

知识点-待整理（旧版）专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何使用CSS来实现元素的边框去除、圆角设置、阴影效果以及动画和过渡效果。具体包括如何通过设置border属性来去除边框，利用border-radius属性创建圆角效果，运用box-shadow属性为元素添加阴影，并详细讲解了transition和animation属性的应用方法，以实现平滑的宽度变化和背景颜色渐变动画。

部署运行你感兴趣的模型镜像

边框设置

border：none；去除边框

boerde-radius：5px；设置圆角

阴影设置

外部：box-shadow：水平垂直模糊缩放颜色；（5px 5px 5px 5px #fffff）

内部：box-shadow： inset 水平垂直模糊缩放颜色；

动画

渐变动画

transition：名称持续时间渐变速度延迟时间（大于两个：名称名称；时间时间；ease ease；）

div
    {
        width:100px;
        height:100px;
        background:red;
        transition:width 2s;
    }
    div:hover
    {
        width:300px;
    }

animation动画

animation：名称持续时间渐变速度延迟时间

div
    {
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;

    }

    @keyframes myfirst
    {
        0%   {background:red;}
        25%  {background:yellow;}
        50%  {background:blue;}
        100% {background:green;}
    }

@keyframes关键帧

您可能感兴趣的与本文相关的镜像