如何使用 CSS 创建方形径向透明背景？

利用 css 创建方形径向透明背景

你想为你的网站创建一个方形的径向透明背景？使用 css 的 box-shadow 属性，你可以轻松实现这一效果。

问题：

如何使用 css 创造出如下图所示的方形径向透明背景？

解决方案：

使用 box-shadow 属性，设置填充颜色、阴影大小和阴影扩散值。

代码示例：

.container {
  width: 200px;
  height: 200px;
  background: transparent;
  box-shadow: 0 px 0 px 100px 100px rgba(0, 0, 0, 0.5);
}

解释：

• width 和 height 属性定义容器的大小。
• background: transparent 设置容器背景为透明。
• box-shadow 属性创造一个从中心向外延伸的方形阴影。
• 第一个 0px 值定义阴影的水平偏移。
• 第二个 0px 值定义阴影的垂直偏移。
• 100px 值定义阴影的大小。
• 100px 值定义阴影的扩散值，即阴影的羽化程度。
• rgba(0, 0, 0, 0.5) 值定义阴影的颜色和透明度。

以上就是如何使用 CSS 创建方形径向透明背景？的详细内容，更多请关注其它相关文章！