我用一个div就画出了一个大西瓜~

站长

2022年12月11日 08:47 · 阅读数 31

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

不知不觉都到了活动尾期了，从活动初期就想着参加这个活动，但是一直没有灵感，看着大家一个个文章写得那么棒，我感觉肚子里的墨水太少了，不敢献丑。但是到了最后一天，我不管了，直接上吧，而且相当简单，用一个div画个大西瓜，emmmm~西瓜应该算夏季最有代表的水果了，与活动相关吧嘻嘻。

前置知识

如果你对径向渐变与阴影效果很熟悉了可以跳过前置知识直接拉到最后看实现。但是为了 ~~凑字数~~ 不明白这些前置知识的小伙伴能明白实现的原理，还是写了下关于这些前置知识的例子。

径向渐变

还不会径向渐变的可以看这个菜鸟教程了解其使用方法。

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

我用一个div就画出了一个大西瓜~

例子

参数中第一个参数的shape size 和position都有默认值，我们先都不给看看啥效果：

 .demo {
    width: 300px;
    height: 300px;
    background-image: radial-gradient(red, yellow, green);
}

我用一个div就画出了一个大西瓜~

咦？？？默认的shape不是椭圆吗？怎么是个圆形？那是因为我们的div元素是个方形的，导致它呈现了圆形的形态。如果换成一个长方形的话：

.demo {
    width: 400px;
    height: 300px;
    background-image: radial-gradient(red, yellow, green);
}

我用一个div就画出了一个大西瓜~

我们设置渐变的形状为圆形：

.demo {
    width: 400px;
    height: 300px;
    background-image: radial-gradient(circle, red, yellow, green);
}

我用一个div就画出了一个大西瓜~

ok,我们再来看看size这个参数，默认是farthest-corner，即以最远的角来渐变，为了测试这个参数，我们必须和position这个参数一起使用：

.demo {
    width: 400px;
    height: 300px;
    background-image: radial-gradient(farthest-corner at left top, red, yellow, green);
}

我用一个div就画出了一个大西瓜~

可以看到我们把圆心置于左上角，那么它是向距离圆心最远的角渐变，我们试试最近的角以及最远的边最近的边看看都是啥效果：

.demo {
    width: 400px;
    height: 300px;
    background-image: radial-gradient(closest-corner at 100px 100px, red, yellow, green);
}

我用一个div就画出了一个大西瓜~

我们把圆心置于100，100这个位置，这个点离左上角的角最近，可以看到左上角颜色终点是绿色。

.demo {
    width: 400px;
    height: 300px;
    background-image: radial-gradient(circle closest-side at 120px 100px, red, yellow, green);
}

我用一个div就画出了一个大西瓜~

我们将点置于120，100位置，设置了形状圆形，size为距离最近的边。很显然距离顶边最近，在顶边处颜色终点是绿色。

.demo {
    width: 400px;
    height: 300px;
    background-image: radial-gradient(circle farthest-side at 120px 100px, red, yellow, green);
}

我用一个div就画出了一个大西瓜~

圆心距离右边最远，右边颜色终点为绿色。

另外，我们还可以设置颜色的占比，请看下面的例子：

.demo {
    width: 300px;
    height: 300px;
    background-image: radial-gradient(red 10%, yellow 20%, green 30%);
}

我用一个div就画出了一个大西瓜~

稍微改改应该有西瓜的样子了：

.demo {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    background-image: radial-gradient(red 50%, yellow 60%, green 70%);
}

我用一个div就画出了一个大西瓜~

阴影

还不会阴影的可以看这个菜鸟教程了解其使用方法

语法

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow属性可以设置一个或多个下拉阴影的框。接下来我们用到的知识就是box-shadow画多个阴影的知识。

我用一个div就画出了一个大西瓜~

例子

.demo {
    width: 100px;
    height: 100px;
    background-color: red;
    box-shadow: 100px 100px 0 blue;
}

我用一个div就画出了一个大西瓜~

多来几个方形：

.demo {
    width: 100px;
    height: 100px;
    background-color: red;
    box-shadow: 100px 100px 0 blue, 100px 0 0 green, 0 100px 0 yellow;
}

我用一个div就画出了一个大西瓜~

ok,有了这个技能，我就可以画大量图形且仅仅只用一个div! 好了，前置知识都学会了，画个大西瓜不是手到擒来~

画西瓜

方法一

.watermelon {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    background-image: radial-gradient(rgb(227, 108, 99) 50%, rgb(219, 220, 193) 60%, rgb(96, 148, 91) 70%);
}

缺点：需要计算下根号2除以2约等于70%

方法二

.watermelon {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    background-image: radial-gradient(closest-side , rgb(227, 108, 99) 80%, rgb(219, 220, 193) 90%, rgb(96, 148, 91) 100%);
}

缺点：需要多传一个参数

但是出来的效果是一样的：

我用一个div就画出了一个大西瓜~

画瓜子

.watermelon {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 150px;
    background-image: radial-gradient(rgb(227, 108, 99) 50%, rgb(219, 220, 193) 60%, rgb(96, 148, 91) 70%);
}

.watermelon::before {
    content: '';
    width: 10px;
    height: 8px;
    border-radius: 4px;
    background-color: #333;
    position: absolute;
    top: 146px;
    left: 145px;
    box-shadow:
        0 80px 1px #333,
        80px 0 1px #333,
        -80px 0 1px #333,
        0 -80px 1px #333,
        57px 57px 1px #333,
        -57px -57px 1px #333,
        -57px 57px 1px #333,
        57px -57px 1px #333;
}

我用一个div就画出了一个大西瓜~

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 大西瓜</title>
    <style>
        .watermelon {
            position: relative;
            width: 300px;
            height: 300px;
            border-radius: 150px;
            background-image: radial-gradient(rgb(227, 108, 99) 50%, rgb(219, 220, 193) 60%, rgb(96, 148, 91) 70%);
        }

        .watermelon::before {
            content: '';
            width: 10px;
            height: 8px;
            border-radius: 4px;
            background-color: #333;
            position: absolute;
            top: 146px;
            left: 145px;
            box-shadow:
                0 80px 1px #333,
                80px 0 1px #333,
                -80px 0 1px #333,
                0 -80px 1px #333,
                57px 57px 1px #333,
                -57px -57px 1px #333,
                -57px 57px 1px #333,
                57px -57px 1px #333;
        }
    </style>
</head>

<body style="padding: 200px">
    <div class="watermelon"></div>
</body>

</html>

结语

今天见识了阴影的奇效，很多有趣的效果可以用阴影实现，等待大家去开发。

我用一个div就画出了一个大西瓜~

前置知识

径向渐变

语法

例子

阴影

语法

例子

画西瓜

方法一

方法二

画瓜子

完整代码

结语

推荐