在CSS中创建模糊边框3 [英] Creating a Fuzzy Border in CSS 3

问题描述

这是我的源图片：

我的源图片放大：

有关如何使用CSS3完成这一任务的任何想法？

Any thoughts on how to accomplish this with only CSS3? Notice the slight bleed upwards into the element.

推荐答案

更新：我删除了供应商前缀，因为几乎每个支持这些属性的浏览器都不需要它们。

Update: I've removed the vendor prefixes, since almost every browser that supports these properties do not need them. Dropping them is considered a best practice at this point.

请参阅Caniuse页面 border-radius 和 <$ c $

See Caniuse page for border-radius and box-shadow.

最好的（仅限）方法是使用多个框阴影：

the best (and only) way to do this is to use multiple box-shadows:

element {
    box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
    border-radius: 20px;
}

box-shadow 工作原理如下：

box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size]; 

border-radius / p>

border-radius works like this:

border-radius: [size];

/*or*/

border-radius: [topleft/bottomright size] [topright/bottomleft size];

/*or*/

border-radius: [topleft] [topright] [bottomright] [bottomleft];

您可以指定高度，曲线的长度如下：

you can specify the Height an length of the curve like this:

border-radius: [tl-width] [tr-width] [br-width] [bl-width] / [tl-height] [tr-height] [br-height] [bl-height];

这篇关于在CSS中创建模糊边框3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！