html - 如何在 Blogger 的主要内容周围放置图像边框

Question

为了使我的网站看起来更专业、更整洁，我真的很想在主要内容中包含顶部和底部边框。这就是我的意思:http://prntscr.com/29k16m

我知道这张照片相当模糊。因此，如果您想全面了解我迄今为止在实现这一目标方面取得的进展，请看这里(在第一个灰色框下):http://aergaergerg.blogspot.com.au/

我不太确定应该包括什么编码，因为我只是个 child ，在编码方面不是很经验.. 而且到处都有这种特定编码的点点滴滴。这是一些:

<Variable name="main.background" description="Main Background" type="background"
   default="transparent url(http://2.bp.blogspot.com/-_axW0fhAC2Y/UqPOKPHt6EI/AAAAAAAADeg/0FbGNIS9E2o/s1600/mainbody2.png) repeat scroll top
 left" value="transparent url(http://2.bp.blogspot.com/-_axW0fhAC2Y/UqPOKPHt6EI/AAAAAAAADeg/0FbGNIS9E2o/s1600/mainbody2.png) repeat scroll top
 left"/>
   <Variable name="main.padding.sides" description="Main Padding Sides" type="length"
default="20px" value="20px"/>

稍后在模板中找到单独的 HTML 编码:

/* Main ----------------------------------------------- */
.main-outer {
  background: $(main.background);

  -moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
  -webkit-border-top-left-radius: $(main.border.radius.top);
  -webkit-border-top-right-radius: $(main.border.radius.top);
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
  border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;

  -moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

.main-inner {
  padding: 15px $(main.padding.sides) 20px;
}

.main-inner .column-center-inner {
  padding: 0 0;
}

.main-inner .column-left-inner {
  padding-left: 0;
}

.main-inner .column-right-inner {
  padding-right: 0;
}

所以，是的，如果这些代码不是很相关，我很抱歉，但我不完全确定要放什么..但我需要的只是我的主要内容的顶部边框:)(周围的背景帖子+侧边栏)

干杯!

Answer 1

这是一个经典的 5 像素浅灰色边框，带有圆 Angular 和阴影。您可以将它放在您的 css 文件中，并通过将它应用到您站点中的不同元素来重复使用它。将此样式添加到包含您的图像或内容的 div，如下所示:

HTML

<div id="Header3" class="rounded-border widget Header">

CSS

.rounded-border {
border:5px solid #cccccc;
box-shadow:1px 1px 5px 2px rgba(00, 00, 00, 0.50);
-moz-box-shadow:1px 1px 5px 2px rgba(00, 00, 00, 0.50);
-webkit-box-shadow:1px 1px 5px 2px rgba(00, 00, 00, 0.50);
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
}

提示
当你有一个非常宽的图像或超出浏览器窗口/视口(viewport)的内容时，div 将只填充窗口，而不包括溢出到水平可滚动区域的内容。这是默认行为。如果你想让 div 环绕溢出的内容，你有几个选择:

• 你可以保持原样
• 可以使用overflow hidden(这样会 overflow hidden 的内容，慎用)
• 您可以通过向容器 div 应用 float 、内联 block 或显示表格来使 div 环绕内容。 Shrink To Fit Tutorial这是browser compatibility tables
• 您可以使用“流体图像”技术使图像适应其内容。 Fluid Image Tutorial

Here's a JSFiddle you can play with