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属性接受三个值：水平偏移量、垂直偏移量、模糊半径和颜色。

相关问题

``` box-shadow ```box-shadow

`box-shadow` 是 CSS3 中的一个样式属性，用于向元素添加阴影效果。它可以模拟现实世界的光影效果，增加元素的立体感和视觉层次。`box-shadow` 可以定义元素四周围以及可能存在的内阴影（inset shadow）和投影（drop shadow）。

`box-shadow` 属性接受一个值列表，通常包括以下几个部分：

1. `horizontal-offset` (水平偏移量)：阴影沿 X 轴的距离，可以是正值、负值或 `0`。
2. `vertical-offset` (垂直偏移量)：阴影沿 Y 轴的距离，同样可正可负或 `0`。
3. `blur-radius` (模糊半径)：阴影的扩散程度，数值越大，模糊越明显。
4. `spread-radius` (扩展半径)：阴影向外扩张的程度，正值使阴影变大，负值使阴影变小，默认值是 `0`。
5. `color` or `inset` (颜色或内阴影)：阴影的颜色，默认是黑色。如果用了 `inset` 关键字，表示内阴影。

语法示例：

selector {
  box-shadow: 
    h-offset v-offset blur-radius spread-radius color [inset] ;
}

例如：

.box {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这将为 `.box` 元素添加一个水平和垂直偏移各2像素，模糊半径4像素，颜色为半透明黑色的外阴影。

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 伪类用于定义鼠标悬停、聚焦和激活样式。