css背景渐变

bubbleJessica

已于 2022-12-22 16:31:11 修改

阅读量101

点赞数

分类专栏： css 文章标签： css html 前端

于 2022-12-22 15:41:35 首次发布

本文链接：https://blog.csdn.net/bubbleJessica/article/details/128408780

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

径向渐变radial-gradient(50% 50%,red,blue)

坐标红变黄变蓝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
      .box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background-image: radial-gradient(50% 50%,red,yellow,blue);
      }
    </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

background-size: contain/cover 一般会结合background-position使用

contain: 包含在盒子里面

cover: 把盒子给盖住

background-attachment属性

background-clip属性（了解即可）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            border: 10px dotted #000;
            background-image: url("images/0.jpg");
            padding: 60px;
            margin-bottom: 10px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            border: 10px dotted #000;
            background-image: url("images/0.jpg");
            padding: 60px;
            /*背景裁切到padding区域，此时就不会在点状线、虚线边框底下渲染*/
            background-clip: padding-box;
            margin-bottom: 10px;
        }
        .box3{
            width: 200px;
            height: 200px;
            border: 10px dotted #000;
            background-image: url("images/0.jpg");
            padding: 60px;
            /*背景裁切到内容区域*/
            background-clip: content-box;
            background-size: 100px auto;
            /*背景起源*/
            background-origin: content-box;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

线性渐变linear-gradient(45deg,red,blue)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
      .box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin-bottom: 10px;
        background-image: linear-gradient(to right,red,blue);
      }
    </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>