gpt4 book ai didi

CSS 边框被应用到不需要的元素(已尝试一切删除它)

转载 作者:行者123 更新时间:2023-11-28 13:44:57 25 4
gpt4 key购买 nike

我创建了一个 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;
}

最佳答案

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

关于CSS 边框被应用到不需要的元素(已尝试一切删除它),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5813238/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com