神奇滤镜！——巧妙实现内凹的平滑圆角

前端

2024-02-01 09:37:31

我们对数字世界的一切都习以为常，无论是外观漂亮、简单又实用的按钮，还是文本、图像和视频的组合，这都是一个富有创造力的过程。

如果我告诉您，您可以在 CSS 中轻松实现一个凸起的圆角按钮和一个带有波浪边框的矩形，您会相信吗？也许有人会说这很疯狂，但事实就是如此。

CSS的魔力——实现凸起圆角按钮

这是利用 CSS 创建凸起圆角按钮的步骤：

首先，为按钮创建一个 div 元素。
```
<div class="button"></div>
```
然后，在 CSS 中为这个 div 元素添加以下样式：
```
.button {
    width: 100px;
    height: 50px;
    background-color: #ff0000;
    border-radius: 10px;
    box-shadow: 0px 5px 10px #000000;
}
```
- width 和 height 属性定义了按钮的宽高。
- background-color 属性定义了按钮的颜色。
- border-radius 属性定义了按钮的圆角半径。
- box-shadow 属性定义了按钮的阴影。
最后，就可以在 HTML 中使用这个 div 元素了。
```
<div class="button"></div>
```
效果：

CSS的无限创意——实现带有波浪边框的矩形

接下来，我们来实现一个带有波浪边框的矩形。以下是如何用 CSS 来实现的：

首先，为矩形创建一个 div 元素。
```
<div class="rectangle"></div>
```

然后，在 CSS 中为这个 div 元素添加以下样式：

.rectangle {
    width: 200px;
    height: 100px;
    border: 1px solid #000000;
    border-radius: 10px;
    background-color: #ffffff;
    mask: url(#wave);
}

@keyframes wave {
    0% {
        mask-position: 0% 0%;
    }
    100% {
        mask-position: 100% 100%;
    }
}

#wave {
    width: 200px;
    height: 100px;
    mask-image: url(https://example.com/wave.svg);
    animation: wave 5s infinite linear;
}