CSS3背景与渐变应用技巧-cyy

2020-11-12
1123

背景颜色与裁切使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        article{
            width:300px;
            height:300px;
            border:10px dashed red;
            background-color:pink;
            padding:10px;
            /* background-clip:content-box; */
            /* background-clip:padding-box; */
            background-clip:border-box; /* 默认效果 */
        }
    </style>
</head>
<body>

    <article>
        层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
    </article>
</body>
</html>

背景重复与滚动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        div{
           width:600px;
           height:300px;
           overflow:auto;
           border:1px solid; 
        }
        article{
            width:600px;
            height:1000px;
            border:10px dashed red;
            background-color:pink;
            padding:10px;
            background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg);
            /* background-repeat:no-repeat; */
            /* background-repeat:repeat-x;
            background-repeat:repeat-y; */
            /* 平均分布 */
            background-repeat:space;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <div>
        <article>
            层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
        </article>
    </div>
</body>
</html>

背景重复与尺寸定制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:600px;
            height:1000px;
            border:10px dashed red;
            background-color:pink;
            padding:10px;
            background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg);
            background-repeat:no-repeat;
            /* 改变背景图片的位置 */
            /* background-position:10px 40%; */
            /* 修改背景图片的尺寸 */
            background-size:600px auto;
            background-size:cover;
            background-size:contain;
        }
    </style>
</head>
<body>
        <article>
            层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
        </article>
</body>
</html>

多图定义与组合语句：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:600px;
            height:1000px;
            border:10px dashed red;
            background-color:pink;
            padding:10px;
            /* 定义多图 */
            /* background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg),url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1861627709,1630773149&fm=26&gp=0.jpg);
            background-position:left top,300px 300px;
            background-repeat:no-repeat,repeat-y; */

            /* 简写 */
            background:pink url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604759832058&di=80459d54e5128f3cb92272d539928f46&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F07%2F20190207111026_QQMLz.thumb.700_0.jpeg) no-repeat center;
            background-size:100px auto;
        }
    </style>
</head>
<body>
        <article>
            层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
        </article>
&南昌网站建设等相关服务请咨询律品科技客服lt;/body>
</html>

盒子阴影使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:100px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background-color:pink;
            /* box-shadow:10px 10px rgba(0,0,.5); */
            box-shadow:0 0 5px rgba(100,100,100,.3);
        }
    </style>
</head>
<body>
    <div>cyy</div>
</body>
</html>

元素背景渐变色使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background:linear-gradient(pink,orange,lightblue);
            background:linear-gradient(45deg,pink,orange,lightblue);
            background:linear-gradient(to left,pink,orange,lightblue);
            background:linear-gradient(to right bottom,pink,orange,lightblue);
            
        }
        nav{
            width:300px;
            height:50px;
            background:linear-gradient(pink,#e49da9,pink);
        }
    </style>
</head>
<body>
    <div>cyy</div>
    <nav>导航条</nav>
</body>
</html>

径向渐变的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8淮安网站建设等相关服务请咨询律品科技客服">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background:radial-gradient(pink,orange,lightblue);
            background:radial-gradient(100px 200px,pink,orange,lightblue);
            background:radial-gradient(100px 200px,at left center,pink,orange,lightblue);
            background:radial-gradient(at left center,pink,orange,lightblue);
            background:radial-gradient(at 50% 0%,pink,orange,lightblue);
        }
    </style>
</head>
<body>
    <div>cyy</div>
</body>
</html>

镜像标识位绘制小太阳：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background:linear-gradient(pink 40%,orange 60%,lightblue 80%);
            /* 小太阳 */
            background:radial-gradient(red,yellow 30%,black 70%,black 100%);
        }
    </style>
</head>
<body>
    <div>cyy</div>
</body>
</html>

颜色渐变中间阈值使用技巧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            /* 设置中间值 */
            background:linear-gradient(90deg,pink,40%,lightblue);
        }
    </style>
</head>
<body>
    <div>cyy</div>
</body>
</html>

使用渐变重复绘制网站进度条：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            /* 重复线性渐变 */
            background:repeating-linear-gradient(90deg,pink,25px,yellow 25px,25px,lightblue 50px);
        }
        aside{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background:repeating-radial-gradient(pink,lightblue 20%,pink 60%);
        }
    </style>
</head>
<body>
    <div>cyy</div>
    <aside></aside>
</body>
</html>