Question

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

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

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

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

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

CSS属性，如下所示，可以在Webkit浏览器下运行，但不适用于Firefox。

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

什么是跨浏览器的方式呢？

Answer 1

我发现最好的方法是使用overflow：hidden。

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

e.g。（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>

（抱歉......我是新人...我以为他们有一些转换符号的方法，我的不好）

Answer 2

您可以为每个li div提供宽度和高度，然后使用CSS background应用位于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/

跨浏览器剪切蒙版

2 个答案: