CSS学习11之背景和渐变

最新推荐文章于 2024-10-08 11:32:20 发布

小黑神zxs

最新推荐文章于 2024-10-08 11:32:20 发布

阅读量384

点赞数 1

分类专栏： CSS3详解文章标签： css3 html 前端 css背景 css渐变

本文链接：https://blog.csdn.net/ZXS1002/article/details/122930974

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在CSS中使用背景图片、重复方式（如repeat-x, repeat-y, no-repeat）以及创建线性渐变效果。通过实例展示，涵盖了默认平铺、水平和垂直重复，以及从亮蓝到紫色的渐变案例。

摘要由CSDN通过智能技术生成

回顾

列表格式默认是实心圆
使用 list-style: 值;修改列表样式

none 去掉圆点
circle 空心圆
square 实心方块
decimal 数字标记

背景和渐变

CSS 背景属性用于定义元素的背景效果。
CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景和渐变</title>
    <style>
        div{
            width: 1000px;
            height: 500px;
            border: 2px solid deeppink;
            /*默认是平铺的*/
            background-image: url("images/狗牌缩小版.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
        /*渐变*/
        .div4{
            background: linear-gradient(90deg, #00ffc4 0%, #a600ff 100%);
        }
    </style>

</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

</body>
</html>