css 在 Chrome 中不起作用(Linux 和 Windows)
我有这样的代码:
<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>
产生:
在 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:
in firefox,
but in chrome (linux, and windows - didnt try in mac) i see nothing why?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
实际上,我相信这是某种错误。如果将高度和宽度更改为 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.
因为你给 div 指定了 0px 宽度和 0px 高度,所以你什么也看不到。
改变这个,希望它能被看到。
Because you gave 0px width and 0px height to the div so you see nothing.
Change this, hope it'll be visible.