# 这个边框css很漂亮

**URL:** <https://forum.freemdict.com/t/topic/14708>\
**Category:** 词典装饰排版交流分享\
**Created:** [2022 年8 月 16 日 10:12 UTC](https://forum.freemdict.com/t/topic/14708 "2022-08-16T10:12:36Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年8 月 16 日 10:12 UTC](https://forum.freemdict.com/t/topic/14708/1 "2022-08-16T10:12:36Z")

</div>

![image](https://forumcdn.freemdict.com/uploads/default/original/3X/c/7/c75bc1a48374cbbefc85fe18e41f9c74642e0d08.jpeg)

怎么写

---

<div class="post-metadata">

作者： ![anon34331345](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/d9b06d/32.png) [@anon34331345](https://forum.freemdict.com/u/anon34331345)\
发布日期： [2022 年8 月 16 日 10:58 UTC](https://forum.freemdict.com/t/topic/14708/3 "2022-08-16T10:58:36Z")

</div>

不是完美复刻，大概像这样：

```auto
<style> 
div {
    width: 400px;
    height: 250px;
    border-radius: 15px;
    background-color: #e0e0e0;
    box-shadow: 1.5px 1.5px 3px -1.5px #c1c1c1;
}
</style>

<div></div>

```

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年8 月 16 日 11:18 UTC](https://forum.freemdict.com/t/topic/14708/4 "2022-08-16T11:18:13Z")

</div>

thanks for your reply, i see.

 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/4/e/4ede752f5c8c37ff8da81ced9389dcba7a3c6a26.jpeg)

---

<div class="post-metadata">

作者： ![西北风](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E8%A5%BF/a9adbd/32.png) [@西北风](https://forum.freemdict.com/u/%E8%A5%BF%E5%8C%97%E9%A3%8E)\
发布日期： [2022 年8 月 16 日 11:44 UTC](https://forum.freemdict.com/t/topic/14708/5 "2022-08-16T11:44:32Z")

</div>

请问这个图来自何处？

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年8 月 16 日 11:46 UTC](https://forum.freemdict.com/t/topic/14708/6 "2022-08-16T11:46:17Z")

</div>

一楼吗？。电视遥控器app

安卓上好像有个美化，就是这个调调，//更新找到了。

> KWGT

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年8 月 17 日 06:44 UTC](https://forum.freemdict.com/t/topic/14708/7 "2022-08-17T06:44:48Z")

</div>

:skr_25_gif:

# CSS box-shadow: What is the difference between blur and spread?

### CSS Box-Shadow: blur, spread, inset, multiple and one side shadow

First of all, there are six properties in CSS box-shadow: offset-x, offset-y, blur-radius, spread-radius, colour and inset. The writing order is like below.

> { offset-x offset-y blur-radius spread-radius color }

or

> { inset offset-x offset-y blur-radius spread-radius color }

When I first read these properties, I was very confused what is the difference between blur and spread. So I tried to write it down like below in the Codepen.

[https://codepen.io/nana8/pen/MGVWVL](https://codepen.io/nana8/pen/MGVWVL)

---

<div class="post-metadata">

作者： ![langwangzhijian](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/l/ac91a4/32.png) [@langwangzhijian](https://forum.freemdict.com/u/langwangzhijian)\
发布日期： [2022 年8 月 19 日 12:09 UTC](https://forum.freemdict.com/t/topic/14708/8 "2022-08-19T12:09:55Z")

</div>

都闪开，专业选手来了！！！  
这种设计风格叫做Neumorphism，这个[网站](https://neumorphism.io)可以自动生成CSS代码

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年8 月 19 日 12:10 UTC](https://forum.freemdict.com/t/topic/14708/9 "2022-08-19T12:10:39Z")

</div>

404 error

---

<div class="post-metadata">

作者： ![langwangzhijian](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/l/ac91a4/32.png) [@langwangzhijian](https://forum.freemdict.com/u/langwangzhijian)\
发布日期： [2022 年8 月 19 日 12:15 UTC](https://forum.freemdict.com/t/topic/14708/10 "2022-08-19T12:15:44Z")

</div>

再试试，之前论坛编辑器自动把url变成链接了，所以就出错了

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年8 月 19 日 12:16 UTC](https://forum.freemdict.com/t/topic/14708/11 "2022-08-19T12:16:19Z")

</div>

爱了爱了  
你真棒👍