css投影的代码,【css】box-shadow匹配ps投影效果/text-shadow(示例代码)

CSS的box-shadow属性可以实现类似PS投影的效果。下面是一个示例代码：

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

上面的代码给一个200px x 200px的盒子添加了一个灰色的投影效果。box-shadow属性接受四个值：水平偏移量、垂直偏移量、模糊半径和颜色。

另外，如果想给文字添加投影效果，可以使用text-shadow属性。下面是一个示例代码：

h1 {
  font-size: 24px;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

上面的代码给一个h1标题添加了一个灰色的文字投影效果。text-shadow属性接受三个值：水平偏移量、垂直偏移量、模糊半径和颜色。

相关问题

hvr-grow-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow, transform; transition-property: box-shadow, transform; } .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); -webkit-transform: scale(1.1); transform: scale(1.1); } </style>

这是一个 CSS 样式代码片段，定义了一个名为 "hvr-grow-shadow" 的样式类。这个样式类实现了一个鼠标悬停时图像放大和产生投影阴影的效果。其中使用了 transform 和 box-shadow 属性来实现动画效果，hover、focus 和 active 伪类用于定义鼠标悬停、聚焦和激活样式。

css box-shadow:

box-shadow 属性用于在元素周围创建阴影效果。它的语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中：

- h-shadow：必需，水平阴影的位置。可以是正值（阴影在元素右侧），也可以是负值（阴影在元素左侧）。
- v-shadow：必需，垂直阴影的位置。可以是正值（阴影在元素下方），也可以是负值（阴影在元素上方）。
- blur：可选，模糊距离。默认值为 0，表示阴影不模糊。模糊距离越大，阴影越模糊，阴影的边缘就越柔和。
- spread：可选，阴影的扩张半径。正值会使阴影扩大，负值会使阴影缩小。
- color：可选，阴影的颜色。默认值为黑色。
- inset：可选，阴影是否为内阴影。默认为外阴影。如果设置为 inset，则为内阴影。

例如，要创建一个向右下方投影的黑色阴影，可以使用以下代码：

box-shadow: 2px 2px black;

如果要创建一个内阴影，可以在属性值中加入 inset：

box-shadow: inset 2px 2px black;