我如何使用内联样式在我页面的已用部分周围添加阴影？

Question

我知道 "right" 方法是通过 CSS styles/rules，但我无法让它们在这种情况下工作（如果好奇请参阅 here ), 所以我咬紧牙关，通过添加内联样式来实现我需要的功能（在顶部添加边距和一个清晰可见的 hr 元素）。

我正在通过 html:

实现这两个目标

<body style='margin-top:40;margin-left:60;margin-right:60;'>
. . .
<hr style='border:0;height:1;background:#333;color:navy;' />

我还需要在页面的已用部分周围画一条线，使其突出。此 CSS class 在不同项目的页面中工作：

.body-content {
   -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
   box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
   padding-left: 1px;
   padding-right: 1px;
   padding-bottom: 15px;
}

...所以我尝试像这样内联添加它（将其附加到现有边距值））：

builder.Append("<body style='margin-top:60;margin-left:60;margin-right:60; -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);padding-left: 1px;padding-right: 1px;padding-bottom: 15px;'>");

...但它不会在页面使用的边缘周围生成框。

为什么不呢？如何使用内联样式显示阴影框？

Answer 1

我不太明白为什么它有效（而其他尝试没有），但这对我有效（将阴影样式添加到html元素，但仍向 body 元素添加边距规则）。这在相当多的上下文中显示了它，但关键行是 "html"、"body" 和 "hr":

builder.Append("<html style='margin-top:20;margin-left:60;margin-right:60; -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);padding-left: 1px;padding-right: 1px;padding-bottom: 15px;'>");
builder.Append("<head>");
builder.Append("<title>");
builder.Append(string.Format("Available Reports For {0}", _unit));
builder.Append(_unit);
builder.Append("</title>");            
builder.Append("<script src='https://code.jquery.com/jquery-1.12.2.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("<link href=\"~/Content/Site.css\" rel=\"stylesheet\" />"); 

builder.Append("</head>");
builder.Append("<body style='margin-top:20;margin-left:20;margin-right:20;'>");

builder.Append("<div class=\"col-md-3\">");
builder.Append("<img src=\"http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png\" alt=\"PRO*ACT usa logo\">");
builder.Append("</div>");
builder.Append("<div class=\"col-md-9\">");
builder.Append(string.Format("<h1 style='font-family:Candara, Calibri, serif;'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("</div>");

builder.Append("<div class=\"col-md-3\">");
builder.Append("</div>");
builder.Append("<div class=\"col-md-9\">");
builder.Append("<label  style='font-family:Georgia, Tahoma, sans-serif;'>(Click any link below to download the Excel spreadsheet file to your computer)</label>");
builder.Append("</div>");

builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style='border:0;height:1;background:#333;color:navy;margin-left:-20;margin-right:-20;' />");

我如何使用内联样式在我页面的已用部分周围添加阴影？

How can I use an inline style to add a shadow around the used portion of my page?

css

shadow

inline-styles