Javascript 如何使用css在div中创建专业框阴影效果

我正在创建一个应用程序，其中我使用div来显示信息，并使用一些jQuery来操作它们。在我的应用程序中，我想给我的div添加一个方框阴影，并尝试使其看起来很专业。我已经为我的div创建了一个方框阴影，但它看起来不那么专业。我正在使用此链接来准备我的应用程序。

现在，我想创建与该应用程序中的摘要div完全相同的个人信息div。我还发布了我的代码，我到目前为止已经做了很多

#personalInformation{
    font-size: 1em;
    border-bottom: 3px solid #98AFC7;
    border-top: 3px solid #98AFC7;
    border-left: 3px solid #98AFC7;
    border-right: 3px solid #98AFC7;    
    box-shadow: 10px 10px 5px;
    line-height: 0; 
    width: 45%;
}

---

现在有人能帮我把我的div和那个应用程序完全一样吗？？或者，如果不可能，那么如何使底部的框阴影只？？有人请帮忙。

我在这里提供了一个使用HAML和SCSS的示例。请点击“已编译”按钮检索呈现的内容。这是一个非常简单的错觉。背景阴影为柔和的黑色。如果你还有任何问题，请告诉我

哈默：

SCSS：

---

应用于您的

的编辑我创建了与该应用程序背景完全相同的框。希望它能帮助你

html{
字体大小：10px；
}
身体{
字体系列：“开放式Sans”、“Helvetica Neue”、Helvetica、Arial、Sans serif；
字体大小：100%；
字体大小：400；
线高：1.42857143；
背景色：#F4；
颜色：#404040；
}
.内容{
浮动：左；
宽度：870px；
}
.内容：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
.盒子{
填充：5px15px；
背景：#fff；
盒影：0 1px 2px#c9c9c9；
-莫兹盒阴影：0 1px2px#c9c9c9；
-webkit盒阴影：0 1px 2px#c9c9c9；
边界半径：2px；
边缘底部：15px；
}
.box:悬停{
盒影：0 2px 2px#bababa；
-莫兹盒阴影：0 2px 2px#bababa；
-网络工具包盒阴影：0 2px 2px#bababa；
}
.盒h5{
字体大小：1.4rem；
边缘顶部：10px；
边缘底部：10px；
线高：1.1；
}
.方框p{
字体大小：1.4rem；
字体大小：400；
线高：1.5；
利润率：0.10px；
}

说明文字
未提及
技能/能力
布局、CSS、JavaScript、jQuery、HTML5、WordPress、Web设计、Web开发、HTML、PHP、AJAX、跨浏览器兼容性、CSS3、UI/UX、前端开发专家、响应式Web设计、网站开发、Web 2.0、Dreamweaver、Web应用程序、图像处理、Drupal、MySQL、Web应用程序设计、，Web界面设计、SVG、前端开发

恢复
未提及

我修改了你的提琴我已经更新了你的提琴谢谢你的回答但你能帮我做一个类似于那个应用程序的背景吗？你能清楚你到底需要什么吗：）和那个应用程序完全一样的信息框吗？是的，是的，完全一样的信息框我想要你编辑我的提琴吗？然后它将是非常有帮助的充分给我补充说！查看：）我应该在哪里添加$background:#3D6CAD$软黑色阴影：rgba（0,0,0,0.29）；是的，我换了小提琴。只需要更新背景阴影。SCSS变量只是指向您希望用于页面背景和阴影背景的颜色感谢Usman让我在我的UI中实现这一点，我将接受您的答案请暂时耐心等待，非常感谢，我可以用id代替你的类吗？因为我有一些jQuery函数，它可以调用idLet类，并添加你的id作为你的jQuery函数，这不会影响UI。你欢迎兄弟。意思是你说的我不会把身份证改成你的班级？？我会把你的课程放在ID上面？？？如果你曾经编辑过我的小提琴，那么它会更有趣clear@lucifer我更新了代码片段，在“你的id”上添加了你的。

#my-box Hello World!

$background: #3D6CAD;
$soft-black-shadow: rgba(0,0,0,0.29);

html, body { width: 100%; height: 100%; background: $background; }

#my-box {
  float: none;
  height: 50px;
  width: 300px;
  margin: 0 auto;
  margin-top: 50px;
  padding-top: 20px;
  text-align: center;
  background: white;
  box-shadow: 0 2px 3px 1px $soft-black-shadow;
}