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

一分耕耘，一分收获！既然都打开这篇《如何使用 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 创建方形径向透明背景？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！