1

我正在使用交互式动画自定义我的主页http://geotheory.co.uk/ ，但无法让它在页面中看起来更不显眼。我想删除动画画布对象的边框，因为这会创建不必要的滚动条。我尝试了各种样式选项，例如border但padding没有任何运气。动画是一个处理脚本，然后被翻译成 javascript。index.html 内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>geotheory.co.uk</title>
    <style>
        canvas:focus{outline:none;}
    </style>

</head>
<body  id="home" bgcolor="blue">
    <script src="processing-1.4.1.min.js"></script>
    <div id="canvasContainer">
    <canvas data-processing-sources="rectangles.pde"></canvas>
    </div>
</body>

感谢您的帮助。

4

2 回答 2

8

我猜你还没有重置浏览器默认样式...所以你需要重置默认样式..使用这个

* {
   margin: 0;
   padding: 0;
}

解释：浏览器为某些元素提供填充，边距，所以为了重置它们，你需要使用我告诉你的样式，否则你也可以使用 CSS 重置

也display: block;用于<canvas>（如 Kolink 所说）

于 2012-12-26T15:59:03.033 回答
7

添加margin: 0;到body您的 cssdisplay: block;中的标签，以及您的 css 中的canvas标签。

例子：

canvas {
    display:block;
}

body {
    margin:0;
}
于 2012-12-26T15:59:00.727 回答