<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字描边</title>
<style>
.text{
/* -webkit-box-reflect: below*/
-webkit-text-stroke:1px #f00
font-size:50px
font-weight: bold
font-family: "微软雅黑"
width: 900px
height: 200px
line-height: 200px
margin:50px auto
text-align: center
}
</style>
</head>
<body>
<div class="text">用我三生烟火,换你一世迷离</div>
</body>
</html>
希望可以帮到你 望采纳
css外边距自动合并 导致的一个bug,你的解决方法是对的,或者加内边距也可,阻止外边距自动合并发生就行了,你可以自己百度下相关知识。这个bug不是普遍的,有些浏览器有,有些没有(记不着哪些有了,你可以自己测试)
外边距自动合并的原理:
<div id="txt">
<p>一篇文章,结构很可能是这样</p>
<p>这篇文章有很多段落,这是第二段文字</p>
<p>段落.......</p>
</div>
这时候为了文字排版好看,通常都会给给 p 来点上、下外边距,让段落间拉出段空白来。比如给 p 上、下各 15px 的外边距:
#txt p{margin:15px 0}
这时两个挨着的段落之间的空白部分距离是多少?
第一段下边距 15px + 第二段上边距 15px = 30px 加起来等于 30px 对不?等于 30px 的话排版就难看了。
实际上浏览器为了解决这个排版问题,把这两个边距强制合并了(而不是简单的做加法运算),实际上下两段之间距离是:15px
这个就是:外边距自动合并,是一个很有用的功能,基本上能解析 css 的浏览器都能自动合并这种外边距。
然后你遇到的错误是:某些浏览器在不该 自动合并外边距时 去帮你合并了,合并的顺序是把下面一块往上面挤,就挤到父元素的外边去了。
把样式里的.menu修改一下:1. 把background:#fff删除
2. 把margin-top:220px改成padding-top:220px
你CSS代码不完整,我猜估计是这里有问题,如果不行再追问,最好把CSS发完整