使用 CSS 反向填充
我正在开发一个网站，并且正在尝试一些 CSS 的新东西。更多的是“天赋”，但我希望该网站看起来不错。 :)
在上图中，我希望该行实际上位于白色框中“欢迎来到” Moria”，所以看起来好像白线从盒子里出来并延伸出去。基本上，我希望白线下降几个像素。 （或者其他所有内容都增加了几个像素。）
这是该部分的 HTML：
<div class = "paragraphSection">
<span class="textHeading">Welcome to Moria</span><span class="mainBodyText">
Moria is a Minecraft server, which we have evolved into fun place to
build, talk, and fight. Everyone is welcome to join us play! Of course, you should probably
read this page to understand what is happening, because it's a little more then
just Minecraft.</span>
</div>
这是我尝试使用的 CSS：
.paragraphSection {
border-top-style:solid;
border-top-width:1px;
border-color:white;
padding-top:0px;
}
.textHeading {
font-size:2em;
padding-left:3px;
padding-right:3px;
background-color:white;
padding:-10px;
-moz-border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
}
我尝试做的只是将填充元素设为负值，这样它就会“向上”而不是向下。然而，这根本不起作用。我以为你可以做到这一点，但显然不行。所以我不知道如何使paragraphSection的边框向下移动。
I'm working on a website, and I'm trying some new stuff with CSS. More for "flair" than anything, but I want the site to look good. :)
In the picture above, I want the line to actually be "in" the white box saying "Welcome to Moria" so it looks as though the white line comes /out/ of the box and stretches across. Basically, I want the white line down a few pixels. (or everything else up a few pixels.)
This is the HTML of the section:
<div class = "paragraphSection">
<span class="textHeading">Welcome to Moria</span><span class="mainBodyText">
Moria is a Minecraft server, which we have evolved into fun place to
build, talk, and fight. Everyone is welcome to join us play! Of course, you should probably
read this page to understand what is happening, because it's a little more then
just Minecraft.</span>
</div>
And this is the CSS I'm trying to use:
.paragraphSection {
border-top-style:solid;
border-top-width:1px;
border-color:white;
padding-top:0px;
}
.textHeading {
font-size:2em;
padding-left:3px;
padding-right:3px;
background-color:white;
padding:-10px;
-moz-border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
}
What I tried to do was simply making the padding element negative, so it would go "up" instead of down. However, that didn't work at all. I thought you could do that, but apparently not. So I'm not sure how to make the border of the paragraphSection move down.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
试试这个：
Try this:
我会选择负上边距：
根据规范不允许使用负填充，因此必须忽略：
来源：CSS 2.1 规范：8.4 盒子模型：填充属性
I would go for a negative top margin:
Negative padding is not allowed as per the spec and therefore must be ignored:
Source: CSS 2.1 Specification: 8.4 Box model: Padding properties
其他样式会影响这些块。
请参阅我的示例： http://jsfiddle.net/DFEyj/ 看起来符合预期。
另请注意，您的语法非常冗长。
Other styles affect these blocks.
See my sample: http://jsfiddle.net/DFEyj/ Looks as intended.
Also do note, that you syntax is very verbose.