圆角不能切断webkit浏览器(例如Chrome)中的内容 position:relative;
看这个演示.
HTML:
<div class="outer">
<div class="inner">
</div>
<div>
Run Code Online (Sandbox Code Playgroud)
CSS:
.outer {
background:yellow;
border:solid 1px black;
position:relative;/* Setting this means rounded corners don't cut off content! */
overflow:hidden;
-moz-border-radius: 12px;
border-radius: 12px;
}
.inner {
background:red;
height:50px;
}
Run Code Online (Sandbox Code Playgroud)
有人知道修复吗?谢谢-
我有一个div,其border-radius设置为某个值(比如10px),以及一个嵌套div,它是其父级的全宽和高度.
<!-- ... -->
<style type="text/css">
div.parent {
display: block;
position: relative;
width: 100px;
height: 100px;
border-radius: 10px;
background: #0000ff;
overflow: hidden;
}
div.inner {
display: block;
position: relative;
width: 100%;
height: 100%;
background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
<div class="inner"></div>
</div>
<!-- ... -->
Run Code Online (Sandbox Code Playgroud)
我注意到尽管溢出设置为隐藏,但父级不会将子项剪切在圆角周围.另一个stackoverflow线程表明此行为是"按设计":
然而,在挖掘CSS3背景和边界的工作草案时......
......我忍不住注意到"角落剪裁"部分下面的描述:
剪切到边框或填充边缘的其他效果(例如"溢出"除"可见"之外)也必须剪切到曲线.替换元素的内容始终被修剪为内容边缘曲线
那我错过了什么?内容是否应该被剪切到角落?我在看过时的信息吗?我做错了吗?

我正在尝试使用谷歌地图实现像上面的图像一样的地图.我通过在StyledMapType对象中将饱和度赋予-100并使用Circle对象在标记周围绘制半径来制作地图灰度.现在整个地图是灰度的,因为我无法在圆圈内设置另一个饱和度.有没有办法实现这个目标?
我试图在谷歌地图中使用带有css3 border-radius属性的圆形边框,但它不适用于chrome,在其他浏览器中它的工作效果很好.任何想法或建议?在这里,我将我的代码和等待积极的答复.谢谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<style type="text/css" >
#map {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom:0;
z-index: 1;
overflow: hidden;
border:solid 3px #00FF33;
border-radius:15px;
width: 500px;
height: 200px;
margin:0 auto;
-moz-border-radius:15px;
-webkit-mask-border-radius:15px;
-webkit-border-radius:15px;
}
#wrapper {
position:absolute;
}
</style>
<div id="wrapper">
<div id="map" ></div>
</div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP …Run Code Online (Sandbox Code Playgroud) 可能重复:
Google地图上的透明圆角
我已经尝试使用特定浏览器的常用样式表属性,但似乎都没有.是否有诀窍才能实现这一目标?我知道我在野外看过它,但不记得在哪里.