夏日炎炎来个西瓜解解暑

CSS

HTML

发布日期: 2022-08-30

最近我也是再回顾之前很多遗忘的CSS3特性，看到有个很有意思的创意，就是用一个div画出一个西瓜，在这炎炎夏日，那就一起画个西瓜给自己解解暑吧！！

一、前置知识点

如果小伙伴们对径向渐变与阴影效果非常了解可以跳过前置知识点直接看最后如果实现，但是如果跟我一样有所遗忘的那就一起来回顾一下吧。

径向渐变

主要语法

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

demo举例

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

可能有小伙伴会想 shape 不是椭圆的吗？怎么效果是个圆呢？那是因为我们的div元素是个方形的，导致它呈现了圆形的形态。如果换成一个长方形的话：

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

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

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

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

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

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

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

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

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

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

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

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

二、阴影知识点

阴影还不太懂的可以去菜鸟教程学一下

语法

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

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

例子

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

多来几个方形：

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

有了这些前置知识点的铺垫相信大家也可以很容易的画出一个大西瓜啦！

三、平面西瓜

方法一

.demo {
    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%

方法二

.demo {
    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%);
}

缺点：需要多传一个参数

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

四、画瓜子

画瓜子仁就是利用伪元素before结合阴影box-shadow完成

.demo {
    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%);
}

.demo::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;
}