CSS学习11之背景和渐变

回顾

列表格式默认是实心圆
使用 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>