我的网站有导航，以矩形按钮列表的形式呈现有圆角.
每个按钮都应该有自己的自定义背景，即照片。照片比按钮大，并且应该随着鼠标在该按钮上的移动而移动。我们有一种效果，就像我们透过窗户看一样。
导航具有以下 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;
跨浏览器的方式是什么？
我发现最好的方法是使用溢出：隐藏。
“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;}
风格>
图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像图像
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
