Opera 11 和边界半径问题

发布于 2024-11-15 05:56:49 字数 444 浏览 3 评论 0原文

border-radius 和 Opera 11.11 的这个问题让我抓狂。

我有一个跨度和一个设置为该跨度背景的图像。我正在将边界半径应用于容纳多个此类跨度的容器。

就像这样：

#carousel { border-radius:15px;  margin:30px 0 0 0px; overflow:hidden; }

论坛告诉我 border-radius 是 Opera 中支持的属性。此外，边框半径应用于块级元素而不是图像。

这是演示： http://rjwcollective.com/equinox/brochure/

请提供有关我在这里缺少的内容的指示。

仙人

原文

This issue with border-radius and Opera 11.11 is driving me NUTS.

I have a span and an image set as background to that span.
I am applying a border-radius to the container that holds several such spans.

Like so:

#carousel { border-radius:15px;  margin:30px 0 0 0px; overflow:hidden; }

Forums tell me that border-radius is a supported property in Opera.
Also, the border-radius is applied to a block-level element and not an image.

Here's the demo:
http://rjwcollective.com/equinox/brochure/

Please provide pointers as to what I am missing here.

Rishi

分享到QQ

分享到微博

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

发布评论

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

烟燃烟灭 2024-11-22 05:56:49

轮播中的跨度放置在轮播上方，并且它们没有配置任何边框半径。任何圆形边框都低于这些跨度。

这对我来说可以看到它的实际效果（请原谅混乱，只需从 Dragonfly 复制/粘贴一个工作示例）：

<div class="carousel_cont">
  <div id="carousel" style="position: relative; overflow-x: hidden; overflow-y: hidden; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px">
    <span id="6" style="background-attachment: scroll; background-repeat: no-repeat; background-image: url("http://rjwcollective.com/equinox/brochure/images/assets/06pg.png"); background-position: 0% 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent; width: 980px; height: 560px; top: 0px; z-index: 9; opacity: 1; display: block; left: 60px; border-top-right-radius: 100px; border-top-left-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px"></span>
  </div>
  <!-- end carousel -->
</div>

Your spans in the carousel are placed over the carousel, and they don't have any border-radius confgured. Any rounded border is below those spans.

THis works for me to see it in action (excuse the mess, just copy/pasting a working example from Dragonfly):

<div class="carousel_cont">
  <div id="carousel" style="position: relative; overflow-x: hidden; overflow-y: hidden; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px">
    <span id="6" style="background-attachment: scroll; background-repeat: no-repeat; background-image: url("http://rjwcollective.com/equinox/brochure/images/assets/06pg.png"); background-position: 0% 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent; width: 980px; height: 560px; top: 0px; z-index: 9; opacity: 1; display: block; left: 60px; border-top-right-radius: 100px; border-top-left-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px"></span>
  </div>
  <!-- end carousel -->
</div>

回复收藏 0 原文

~没有更多了~