Question

我创建了一个200x200的方形div并创建了一个虚线边框来定义它。

问题在于它上方的div，完全不相关，也正在应用虚线边框。如果我添加其他div，他们不会遇到问题。只是我的标题文字。

这是一张图片！

an image http://i.stack.imgur.com/4qod6.png

这是HTML / CSS

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="index.css" type="text/css" /> 
</head>
<body>

<div id="main">
<h1>Test Text</h1>  
</div>
<div id="dropbox">
    <p>Drag and drop your file here!</p>
    <img src="spinner.gif" />
</div>
</body>
</html>

html {
height: 100%;
}
body {
height: 100%;
font-family: "HelveticaNeue-Light", sans-serif;
background: -webkit-gradient(linear, 0 0, 0 15%, from(#2B2B2B), to(#383838)); 
background: -moz-linear-gradient(100% 100% 90deg, #2B2B2B, #383838);
margin: 0;
background-repeat: no-repeat;
}
#main h1{
border: none;
padding-top: 4em;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 250%;
text-decoration: none;  
color: #ffffff;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
-webkit-text-stroke: 1px white; 
text-shadow: 2px 2px 1px #292929;
}
#dropbox {
border-style:dashed;
border-width:5px;
width:200px;
height:200px;
font-family: Georgia, "HelveticaNeue-Light", sans-serif;
font-color: #222;
font-size:105%;
text-shadow: 0px 1px 1px #555;
text-align: center;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}

Answer 1

使用Chrome开发工具，文本上的-webkit-text-stroke似乎会导致此错误;可能是由于-webkit错误或其他原因。当我删除它时，它修复了边框问题，否则不会影响文本。

CSS边框应用于不需要的元素（已尝试删除它的所有内容）

1 个答案: