3

我的网站有导航，显示为带有圆角的矩形按钮列表。

每个按钮都应该有自己的自定义背景，即一张照片。照片比按钮大，应该随着鼠标在此按钮上的移动而移动。我们有一个效果，就像我们正在透过窗户看一样。

导航具有以下 HTML 结构：“ul > li > a > img”。

我认为，每个“ul > li”应该是一个带圆角的矩形，并充当图像的剪贴蒙版。

设置“溢出：隐藏；” 不起作用，因为剪切区域是没有圆角的简单矩形。

CSS 属性，如下所示，在 Webkit 浏览器下工作，但在 Firefox 下不工作。

mask-image: url(/images/mask.png);
mask-position: 0 0;
mask-repeat: no-repeat no-repeat;
mask-size: 125pt 77pt;

什么是跨浏览器的方法？

4

2 回答 2

6

我发现最好的方法是使用溢出：隐藏。

“div/li”按钮内的任何内容都将被剪裁到按钮尺寸。适用于圆角。

例如（div 示例）（黄色框是 400 x 400 图像，红色框是 200 x 200 ..example = chrome/-webkit-） 

 <html>

<style>
.box{width:200px; height:200px; background:red;overflow:hidden;border-radius:30px;}
.image {width:400px; height:400px; background:yellow;}



</style>



<div class="box">
<div class="image">
Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image 
</div>



</div>
</html>

（对不起......我是新来的......我以为他们有一些转换符号的方法，我的错）

于 2011-02-16T09:54:53.897 回答
1

您可以给每个li div宽度和高度，然后使用 CSSbackground应用定位的图像background-position，然后将其用于圆角：

behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari and Chrome */
-khtml-border-radius: 20px; /* Linux browsers */
border-radius: 20px; /* Opera 10.50, IE and CSS3 */

并包含此 HTC 文件以获得 IE 支持：

http://code.google.com/p/curved-corner/

于 2011-02-15T19:03:45.680 回答