前端入门知识——css3（1）

最新推荐文章于 2025-07-11 10:15:28 发布

原创最新推荐文章于 2025-07-11 10:15:28 发布 · 878 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#程序员 #编程 #web前端 #资讯 #科技

HTML 同时被 3 个专栏收录

40 篇文章

订阅专栏

科技

40 篇文章

订阅专栏

web前端

40 篇文章

订阅专栏

本文介绍了CSS3的基础知识，包括如何设置圆角边框，如`border-radius`属性的使用，以及 rgba 颜色值实现透明效果。还讲解了CSS3的阴影效果`box-shadow`的创建，以及过渡动画`transition`的各个参数，如`transition-property`、`transition-duration`等。适合前端初学者了解和掌握CSS3的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圆角，透明度，rgba
CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;

rgba（新的颜色值表示法）
1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

CSS3阴影

box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影

<style type="text/css">
.box{
width:200px;
height:50px;
background-color:gold;
/* box-shadow:10px 10px 5px 2px pink inset; */
box-shadow:10px 10px 5px 2px pink;
}
</style>
......
<div class="box"></div>

<!-- 给盒子加上了粉红色的阴影 -->

css3圆角示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3圆角</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: aqua;
            border: 3px solid black;
            margin: 50px auto 0;
            /*border-top-left-radius: 30px 60px;  !* 椭圆形角 *!*/
            border-top-left-radius: 60px; /* 圆角 */
            border-top-right-radius: 100px; /* 圆角 */
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            border: 3px solid black;
            margin: 50px auto 0;
            /*border-radius: 150px;*/
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>

css3圆角示例

透明度rgba示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background: url(../../images/banner01.jpg);
        }
        .box {
            width: 300px;
            height: 100px;
            background-color: black;
            font-size: 20px;
            color: white;
            text-align: center;
            line-height: 100px;

            /* 元素透明度的完整写法，会将背景和字体的透明度的变化 */
            opacity:0.3;
            filter:alpha(opacity=30);  /* 兼容ie */
        }
        .box2 {
            width: 300px;
            height: 100px;
            background-color: rgba(0,0,0,0.3);  /* 仅会设置背景的透明度 */
            font-size: 20px;
            color: white;
            text-align: center;
            line-height: 100px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="box">这是一个div标签</div>
<div class="box2">这是一个div2标签</div>
</body>
</html>

透明度rgba示例

transition动画
CSS3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式

linear 匀速

ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(n,n,n,n)
比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲线设置网站：https://matthewlein.com/ceaser/
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

一般用缓冲状态；

鼠标移动到图形上变化动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;

            /*transition: width 1s ease;*/
            /*transition: width 1s ease 1s;  !* 延迟一秒再做动画 *!*/
            /*transition: width 1s ease, height 1s ease 1s;  !* 宽先动，高延迟一秒再动 *!*/
            /*transition: width 1s ease, height 1s ease 1s, background-color 1s ease 2s;  !* 宽先动，高延迟一秒再动 *!*/
            /*transition: width 1s ease, height 1s ease, background-color 1s ease;  !* 所有的一起动 *!*/
            transition: all 1s ease;  /* 所有的一起动，相当于上面一句 */
        }
        .box:hover {
            /*width: 600px;*/
            width: 600px;
            height: 500px;
            background-color: gray;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

鼠标移动到图形上变化动画

鼠标移动图片弹出说明动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片说明文字</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .pic_con {
            width: 200px;
            height: 300px;
            margin: 50px auto 0;
            position: relative;
            overflow: hidden;
        }
        .pic_info {
            position: absolute;
            left: 0;
            top: 300px;
            width: 200px;
            height: 120px;
            background-color: rgba(0,0,0,0.3);
            color: white;
            transition: all 500ms ease;
        }
        .pic_con:hover .pic_info {
            top: 180px;
        }
    </style>
</head>
<body>
<div class="pic_con">
    <img src="../../images/banner01.jpg" alt="产品图片">
    <div class="pic_info">
        <h3>文字标题</h3>
        <p>文字说明</p>
    </div>
</div>
</body>
</html>

鼠标移动图片弹出说明动画

最后，给大家推荐一个前端学习进阶内推交流圈子（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（会定期免费提供一些收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。