css 在 Chrome 中不起作用(Linux 和 Windows)

发布于 2025-01-07 03:36:14 字数 605 浏览 0 评论 0原文

我有这样的代码:

<style type="text/css">
div {
margin: 100px auto;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
</style>
<div></div>

产生:

haflcircle

在 firefox 中,

但在 chrome 中(linux 和 windows - 没有在 mac 中尝试)我什么也没看到为什么?

i have this code:

<style type="text/css">
div {
margin: 100px auto;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
</style>
<div></div>

that produce:

haflcircle

in firefox,

but in chrome (linux, and windows - didnt try in mac) i see nothing why?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

Saygoodbye 2025-01-14 03:36:14

实际上,我相信这是某种错误。如果将高度和宽度更改为 1px,它对我有用。不幸的是,这会留下一个小白点,但可以通过将背景更改为红色并将背景剪辑更改为内容来修复。

JSFiddle 示例。

I believe it is some sort of bug, actually. It works for me if you change the height and width to 1px. This leaves a little white dot, unfortunately, but that can be fixed by changing the background to red and the background-clip to content.

JSFiddle example.

听不够的曲调 2025-01-14 03:36:14

因为你给 div 指定了 0px 宽度和 0px 高度,所以你什么也看不到。

width: 0px;
height: 0px;

改变这个,希望它能被看到。

Because you gave 0px width and 0px height to the div so you see nothing.

width: 0px;
height: 0px;

Change this, hope it'll be visible.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文