左侧和右侧的Box-shadow不与ReactJs一起工作

Question

我试图在使用Css的React Js中仅在左侧和右侧应用阴影，但我只在一侧获得阴影。下面是代码

.MainSection{
margin-top:2%;
background-color: white;
width: 40%;
border: solid 1.5px gray;
box-shadow: -60px 0px 100px -90px #000000,60px 0px 100px -90px #000000;

}

import React from "react";
import "./MainSection.css";
function MainSection() {
return (
<div className="MainSection">
<h1>MainSection</h1>
</div>
);
}
export default MainSection;

Answer 1

您的box-shadow维度有问题。如果您更改维度

，则css

的其余部分可以工作。

.MainSection{
margin-top:2%;
background-color: white;
width: 40%;
border: solid 1.5px gray;
box-shadow: 22px 0 15px -4px #000000, -22px 0 8px -4px #000000;
}

<div class="MainSection">
<h1>MainSection</h1>
</div>

Answer 2

使用此命令在左右两侧添加方框阴影

box-shadow: -60px 0px 100px -20px #000000, 60px 0px 100px -20px #000000;