“开箱即用”的 ASP.NET 创建的主页有左右边缘(页面不占据浏览器窗口的整个宽度)。
我需要保留它，但我还需要为左右边缘(相当数量)以及顶部和底部(更少)添加阴影。这显示了我需要多少阴影 - 这显示了页面的 NW Angular ，左侧边缘阴影比顶部边缘更厚:
我假设我需要一个 CSS 类来实现这一点，但我需要将它应用于什么元素？正文 CSS 是:
body {
padding-top: 50px;
padding-bottom: 20px;
background-color: white;
}
更新
这里应大众需求是 HTML:
<div class="jumbotronjr">
<img src="http://www.platypus.com/wp-content/themes/platypus/images/pa_logo_notag.png" alt="Platypus logo">
<label class="titletext">Report Scheduler</label>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
@* row 1: Select a Unit "combobox" *@
<div class="row">
<div class="col-md-12">
<label class="sectiontext">Select a Unit</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select class="dropdown" id="unitsselect" name="unitsselect">
<option disabled selected value="-1">Please choose a Unit</option>
@foreach (var field in units)
{
<option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
}
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="sectiontext">Select Report</label>
</div>
</div>
@* row 2: Select Report checkboxes *@
<div class="row">
<div class="col-md-12" id="unitsCheckboxDiv">
@foreach (var rpt in reports)
{
@* convert report name to lowercase and no spaces for use as checkbox's ID *@
var morphedRptName = rpt.report.Replace(" ", string.Empty).Replace("/", "_").ToLower();
<input class="ckbx leftmargin8" id="ckbx_@(morphedRptName)" type="checkbox" value="@rpt.report" />@rpt.report
}
</div>
</div>
@* row 3: Email recipients *@
<div class="row">
<div class="col-md-12">
<h4 class="h4 sectiontext">Specify Recipients</h4>
</div>
</div>
@* row 4: Email recipients *@
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Email 1" id="email1" />
<input type="text" placeholder="Email 2" id="email2" />
<input type="text" placeholder="Email 3" id="email3" />
</div>
</div>
@* row 5: Email recipients *@
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Email 4" id="email4" />
<input type="text" placeholder="Email 5" id="email5" />
<input type="text" placeholder="Email 6" id="email6" />
</div>
</div>
@* row 6: Email recipients *@
<div class="row">
<div class="col-md-12">
<button class="btn pseudobtn" name="btnAddlEmail" id="btnAddlEmail">+ Add Another Email</button>
</div>
</div>
@*from https://www.simple-talk.com/dotnet/asp.net/modal-input-forms-in-asp.net-mvc/*@
@* modal input form which remains invisible until the link (addlEmails) is clicked *@
<div class="modal fade halfwidth" id="add-email">
<div class="modal-header">
<a class="close" data-dismiss="modal"></a>
<h3></h3>
</div>
<div class="modal-body">
<p></p>
<label class="margin4horizontal"></label>
<input type="text" name="additionalEmail" id="additionalEmail" />
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal"></a>
<a href="#" class="btn btn-primary" id="btnSaveEmailInternal"></a>
</div>
</div>
@* row 4: "Generate and Email Report" label *@
<div class="row">
<div class="col-md-12">
<h4 class="h4 sectiontext">Generation and Email Reports</h4>
</div>
</div>
@* row 5: Label and first radio button on left, second radio button on right *@
<div class="row">
<div class="col-md-6">
<input type="radio" id="groupRptGenerationAndSendingByDayOfMonth" name="groupRptGenerationAndSendingTiming" value="day">On a specific day of the month
</div>
</div>
@* row 6: Day of month selection and label on left; Nth DOW of each (frequency) on the right *@
<div class="row">
<div class="col-md-6">
<select id="dayofmonthselect" name="dayofmonthselect">
@foreach (String day in daysOfMonth)
{
<option id="selItem_@(day) value=" day">@day</option>
}
</select>
<label> of each month</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div>
<input type="radio" id="groupRptGenerationAndSendingBasedOnAPattern" name="groupRptGenerationAndSendingTiming" value="pattern">Based on a pattern<br>
<select id="ordinalselect">
@foreach (String ord in ordinalWeeksOfMonth)
{
<option id="selItem_@(ord) value=" ord">@ord</option>
}
</select>
<select id="dayofweekselect">
@foreach (String dow in daysOfWeek)
{
<option id="selItem_@(dow) value=" dow">@dow</option>
}
</select>
<label> of each</label>
<select id="weekormonthselect">
@foreach (String pf in patternFrequency)
{
if (pf == "Month")
{
<option id="selItem_@(pf)" value="@pf" selected="selected">@pf</option>
}
else
{
<option id="selItem_@(pf) value=" pf">@pf</option>
}
}
</select>
</div>
</div>
</div>
@* row 7: "Report Parameters" text *@
<div class="row">
<div class="col-md-12">
<h3 class="h3 sectiontext">Report Date Range Parameters</h3>
</div>
</div>
@* row 7b: Produce ge params on left, Delivery Performance on right *@
<div class="row">
<div class="col-md-6">
<h4>Produce ge (report spans up to 13 months)</h4>
<label>From</label>
<select class="dropdown" id="prodgefrom" name="prodgefrom">
@for (int i = 1; i <= maxMonthsBackBegin; i++)
{
if (i == 13)
{
<option id="selItem_@(i)" value="@i" selected="selected">@i</option>
}
else
{
<option id="selItem_@(i)" value="@i">@i</option>
}
}
</select>
<label>months back</label>
<label>To</label>
<select id="prodgeto" name="prodgeto">
@for (int i = 1; i <= maxMonthsBackEndNormal; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<button class="btn btn-sm" id="btnTestProducegeSettings">Test Settings</button>
</div>
<div class="col-md-6">
<h4>Delivery Performance (report spans up to 40 days)</h4>
<label>From</label>
<select class="dropdown" id="delperffrom" name="delperffrom">
@for (int i = 1; i <= maxDaysBackForDeliveryPerformance; i++)
{
if (i == 14)
{
<option id="selItem_@(i)" value="@i" selected="selected">@i</option>
}
else
{
<option id="selItem_@(i)" value="@i">@i</option>
}
}
</select>
<label>days back</label>
<label>To</label>
<select class="dropdown" id="delperfto" name="delperfto">
@for (int i = 1; i <= maxDaysBackForDeliveryPerformance; i++)
{
if (i == 7)
{
<option id="selItem_@(i)" value="@i" selected="selected">@i</option>
}
else
{
<option id="selItem_@(i)" value="@i">@i</option>
}
}
</select>
<label>days back</label>
<button class="btn btn-sm" id="btnTestDeliveryPerformanceSettings">Test Settings</button>
</div>
@* row 7c: Price Compliance params on left, Fill Rate on right *@
<div class="row">
<div class="col-md-6">
<h4>Price Compliance (report spans up to 13 months)</h4>
<label>From</label>
<select class="dropdown" id="pricecompliancefrom" name="pricecompliancefrom">
@for (int i = 1; i <= maxMonthsBackBegin; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<label>To</label>
<select class="dropdown" id="pricecomplianceto" name="pricecomplianceto">
@for (int i = 1; i <= maxMonthsBackEndNormal; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<button class="btn btn-sm" id="btnTestPriceComplianceSettings">Test Settings</button>
</div>
<div class="col-md-6">
<h4>Fill Rate (report spans up to 4 months)</h4>
<label>From</label>
<select class="dropdown" id="fillratefrom" name="fillratefrom">
@for (int i = 1; i <= maxMonthsBackBegin; i++)
{
<option id="selItem_@(i)" value="@i">@i</option>
}
</select>
<label>months back</label>
<label>To</label>
<select class="dropdown" id="fillrateto" name="fillrateto">
@for (int j = 1; j <= maxMonthsBackEndFillRate; j++)
{
<option id="selItem_@(j)" value="@j">@j</option>
}
</select>
<label>months back</label>
<button class="btn btn-sm" id="btnTestFillRateSettings">Test Settings</button>
</div>
</div>
</div>
@* row 8: "Save config" button on left, "View List of future reports" on right *@
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary" id="btnSaveConfig" name="btnSaveConfig">Save/Update Configuration for this Unit and Clear Selections</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary" id="btnViewList" name="btnViewList">View List of Future Report Generation</button>
</div>
</div>
更新 2
这是 _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Platypus</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Ajax"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
}({
instrumentationKey:"******"
});
window.appInsights=appInsights;
appInsights.trackPageView();
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Report Scheduler", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
@*<hr />
<footer>
<p>© @DateTime.Now.Year - Platypus</p>
</footer>*@
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
最佳答案
根据您提供的 HTML，您可以在主样式表中使用以下 css 为您的主要内容区域创建一个 box-shadow:
.body-content {
-webkit-box-shadow: -1px 0 5px 0 rgba(0,0,0,.25);
box-shadow: -1px 0 5px 0 rgba(0,0,0,.25);
}
我使用了网站 css3generator为 box-shadow 创建样式定义。如果这不能创建您想要的确切阴影，您可以去那里创建一个新的。
关于html - 如何向默认 ASP.NET 页面的边缘添加底纹？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37059496/