css - 05背景处理

来源：恒创科技编辑：恒创科技编辑部

2024-01-18 17:41:59

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景处理</title>
</head>
<style>
    /*背景颜色不能设置尺寸*/

    /*1.背景颜色与裁切*/
    /*div {*/
    /*    height: 500px;*/
    /*    border: dashed 10px black;*/
    /*    padding: 30px;*/
    /*    background-color: red;*/
    /*    !*不含边框，包括内边距*!*/
    /*    background-clip: padding-box;*/
    /*    !*内容区域*!*/
    /*    !*background-clip: content-box;*!*/
    /*    !*包括边框*!*/
    /*    !*background-clip: border-box;*!*/
    /*}*/

    /*2.背景重复与滚动*/
    /*article {*/
    /*    border: 10px dashed black;*/
    /*    height: 500px;*/
    /*    overflow: auto;*/
    /*}*/

    /*div {*/
    /*    height: 3000px;*/
    /*    background-image: url("cat.jpg");*/
    /*    background-repeat: no-repeat;*/
    /*    background-attachment: fixed;*/
    /*    !*background-attachment: scroll;*!*/
    /*}*/

    /*3.盒子阴影使用方法*/
    /*div {*/
    /*    width: 300px;*/
    /*    height: 300px;*/
    /*    border: 1px solid #ddd;*/
    /*    box-shadow: 0 0 5px rgba(100,100,100,.2)*/
    /*}*/

    /*4.元素背景激变色使用*/
    /*div {*/
    /*    height: 500px;*/
    /*    width: 500px;*/
    /*    !*线性渐变*!*/
    /*    !*background: linear-gradient(-45deg,red,green,blue)*!*/
    /*    !*background: linear-gradient(to right bottom, red, green, blue)*!*/
    /*    !*径向渐变*!*/
    /*    !*background: radial-gradient(at left bottom ,red, green, blue);*!*/
    /*}*/

</style>

<body>
<!--1.背景颜色与裁切-->
<!--<div>-->
<!--    content-->
<!--</div>-->

<!--2.背景重复与滚动-->
<!--<article>-->
<!--    <div>-->
<!--        content-->
<!--    </div>-->
<!--</article>-->

<!--3.盒子阴影使用方法-->
<!--<div>-->
<!--    content-->
<!--</div>-->

<!--4.元素背景激变色使用-->
<!--<div>-->
<!--    content-->
<!--</div>-->

</body>
</html>