为 Sharepoint 2013 Webparts 应用自定义边框样式答案

【问题标题】：Apply Custom Border Style for Sharepoint 2013 Webparts为 Sharepoint 2013 Webparts 应用自定义边框样式
【发布时间】：2019-05-09 23:31:28
【问题描述】：

我想将我的自定义边框样式赋予 sharepoint 中所有可用的 Webpart。所以我添加了以下类。

.s4-wpcell-plain
{
 border:1px solid #d8d8d8;
}

它应用了几乎所有的网络部件。但问题是它也在其他地方不必要地添加了边界。就像使用电子搜索页面搜索时一样，所有结果都带有边框。它也在申请sharepoint博客页面。

我怎样才能摆脱那些不必要的边框？或者我需要应用哪个 CSS，以便它只适用于 webpart。

【问题讨论】：

标签： css sharepoint-2013

【解决方案1】：

尝试将边框应用到以下类：

.ms-webpartzone-cell {
    border: 1px solid #D8D8D8;
}

【讨论】：

其实一开始我只在那个地方申请。它没有在搜索页面中给出任何边框。但它通常不应用边界的一些wepart。例如，它没有显示的文档 webpart。

【解决方案2】：

好的，所以我也搞砸了。它对我有用的唯一方法是将代码应用于以下内容

    .s4-wpcell {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}

   .ms-webpart-chrome {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}

    .s4-wpActive {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}

所以这会将它应用到所有 Web 部件（我使用的是 wiki 页面，所以“隐藏”部分也应用了它并突然出现）。要仅将此样式应用于特定 Web 部件，请在类前面添加 .MSOZoneCell_WebPartWPQ#。

#MSOZoneCell_WebPartWPQ2 .s4-wpcell,
#MSOZoneCell_WebPartWPQ2 .ms-webpart-chrome,
#MSOZoneCell_WebPartWPQ2 .s4-wpActive {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}

希望这会有所帮助。

【讨论】：