学堂学堂学堂公众号手机端

css - 05背景处理

lewis 1年前 (2024-03-10) 阅读数 2 #技术

<!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>

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：在CentOS系统中，可以使用以下命令来查看磁盘挂载情况：使用df命令来查看已经挂载的文件系统及其使用情况： df-h 使用lsblk命令来查看磁盘及分区的情况： lsblk 下一篇：服务器虚拟化技术对可持续发展的社会影响