相关疑难解决方法(0)

如果position:relative,圆角不能切断webkit浏览器中的内容

圆角不能切断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)

有人知道修复吗?谢谢-

html css webkit rounded-corners

24
推荐指数
2
解决办法
1万
查看次数

CSS3 border-radius剪切问题

我有一个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防止图像溢出圆角框?

然而,在挖掘CSS3背景和边界的工作草案时......

http://www.w3.org/TR/css3-background/#corner-clipping

......我忍不住注意到"角落剪裁"部分下面的描述:

剪切到边框或填充边缘的其他效果(例如"溢出"除"可见"之外)也必须剪切到曲线.替换元素的内容始终被修剪为内容边缘曲线

那我错过了什么?内容是否应该被剪切到角落?我在看过时的信息吗?我做错了吗?

html css css3

20
推荐指数
2
解决办法
3万
查看次数

Google Map API v3颜色自定义

地图样本图像

我正在尝试使用谷歌地图实现像上面的图像一样的地图.我通过在StyledMapType对象中将饱和度赋予-100并使用Circle对象在标记周围绘制半径来制作地图灰度.现在整个地图是灰度的,因为我无法在圆圈内设置另一个饱和度.有没有办法实现这个目标?

google-maps google-maps-api-3

15
推荐指数
1
解决办法
1252
查看次数

CSS3圆角与谷歌地图

我试图在谷歌地图中使用带有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-maps css3

9
推荐指数
5
解决办法
2万
查看次数

在谷歌地图上放置圆角有什么诀窍吗?

可能重复:
Google地图上的透明圆角

我已经尝试使用特定浏览器的常用样式表属性,但似乎都没有.是否有诀窍才能实现这一目标?我知道我在野外看过它,但不记得在哪里.

html css google-maps google-maps-api-3

8
推荐指数
1
解决办法
1万
查看次数