前端的初学习 -- 第五章 -- CSS3

前端的初学习 -- 第五章 -- CSS3


博客说明

文章内容输出来源:拉勾教育Java就业急训营

圆角

前端的初学习 -- 第五章 -- CSS3

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: chartreuse;
        /* border-radius: 1px 10px 30px 50px; 左上、右上、右下、左上:顺时针 */
        /* border-radius: 35px;四个角 */
        border-radius:50%;/* 圆 */
    }
</style>

<body>
    <div></div>
</body>

阴影

前端的初学习 -- 第五章 -- CSS3

<style>
    div{
        width: 100px;
        height: 100px;

        box-shadow: 20px 20px 30px 10px gray;
    }
</style>

<body>
    <div></div>
</body>

渐变

线性渐变

background:linear-gradient([方向/角度],颜色列表);
<style>
    div {
        width: 200px;
        height: 100px;
        margin: 10px;
    }

    .a {
        background: linear-gradient(red, black);/* 两种颜色,从左往右渐变[默认] */
    }

    .b {
        background: linear-gradient(red, black, pink, green);/* 四种颜色,从左往右渐变 */
    }

    .c {
        background: linear-gradient(to left, red, black);/* 从右往左渐变 */
    }

    .d {
        background: linear-gradient(to top left, red, black);/* 从右下往左上渐变 */
    }

    .e {
        background: linear-gradient(30deg, red, black);/* 从下往上30度开始 右上渐变 */
    }
</style>

<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
</body>

径向渐变

background: radial-gradient(颜色列表);
<style>
    div {
        width: 200px;
        height: 200px;
        margin: 10px;
    }

    .a {
        background: radial-gradient(red, black);/* 两种颜色,从内往外渐变 */
    }

    .b {
        background: radial-gradient(red, black, pink, green);/* 四种颜色,从内往外渐变  */
    }

    .c {
        border-radius: 50%;
        background: radial-gradient(red, black);/* 渐变球 */
    }
</style>

<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

背景

背景位置

前端的初学习 -- 第五章 -- CSS3

<style>
    div{
        width: 500px;
        height: 353px;
        background:url("img/1.jpg") no-repeat;/* 设置图片以及墙纸效果为仅显示一次 */
        background-size: cover;/* 图片大小 */
        border: 5px dashed black;/* 边框大小为5px、虚线、黑色 */
        margin: 20px;/* 与下一个div相隔20px */

        padding: 10px;/* 内边距 */
    }

    .a{
        background-origin: border-box;/* 背景贴边框的边 */
    }
    .b{
        background-origin: padding-box;/* 背景贴内边框的边 */
    }
    .c{
        background-origin: content-box;/* 背景贴内容的边 */
    }
</style>

<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

背景裁切

前端的初学习 -- 第五章 -- CSS3

<style>
    div{
        width: 500px;
        height: 353px;
        background:url("img/1.jpg") no-repeat;/* 设置图片以及墙纸效果为仅显示一次 */
        background-size: cover;/* 图片大小 */
        border: 5px dashed black;/* 边框大小为5px、虚线、黑色 */
        margin: 20px;/* 与下一个div相隔20px */

        padding: 10px;/* 内边距 */
    }

    .a{
        background-clip: border-box;/* 边框开切 */
    }
    .b{
        background-clip: padding-box;/* 内边距开切 */
    }
    .c{
        background-clip: content-box;/* 内容开切 */
    }
</style>

<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

背景大小

前端的初学习 -- 第五章 -- CSS3

过渡动画

过度

前端的初学习 -- 第五章 -- CSS3
前端的初学习 -- 第五章 -- CSS3

<style>
    div{
        width: 100px;
        height: 50px;
        border: 1px solid black;
    }
    .a{
        transition: width 1s ease-in-out 0s;
    }

    /* 使用伪类触发 */
    div:hover{
        width: 500px;
    }
</style>

<body>
    <div class="a">123456789</div>
</body>

动画

前端的初学习 -- 第五章 -- CSS3
例子一:一个元素从左向右移动,3秒内执行2次

<style>
    .a {
        width: 700px;
        height: 50px;
        border: 1px solid red;
        float: left;/* 取消块独占一行的特性 */
    }

    .b {
        width: 50px;
        height: 50px;
        background-color: yellow;
        /* 动画属性:关键字、执行时间、过度函数、执行次数 */
        animation: x 3s linear 2;
    }

    /* 关键帧 */
    @keyframes x {
        from{margin-left:0px;}
        to {margin-left:650px;}
    }
</style>

<body>
    <div class="a"></div>
    <div class="b"></div>

    <div class="c"></div>
    <div class="d"></div>
</body>

例子二:一个元素从左向右移动,3秒内执行完成。无限次交替执行

<style>
    .a {
        width: 700px;
        height: 49px;
        border: 1px solid red;
        float: left;/* 取消块独占一行的特性 */
    }

    .b {
        width: 50px;
        height: 50px;
        background-color: yellow;
        /* 动画属性:关键字、执行时间、过度函数、执行次数 */
        animation: x 3s linear infinite alternate;
    }

    /* 关键帧 */
    @keyframes x {
        0%{margin-left:0px;}
        25%{background-color: darkblue;}
        50%{background-color: seashell;}
        75%{background-color: darkslategray;}
        100%{
            background-color: violet;
            margin-left: 650px;
        }
    }
</style>

<body>
    <div class="a"></div>
    <div class="b"></div>

    <div class="c"></div>
    <div class="d"></div>
</body>
上一篇:初步使用markdown


下一篇:Python骚操作从列表推导和生成器表达式开始