|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
-webkit-box-reflect 是 chromium 浏览器私有属性,可将源盒子原原本本投射到上、左、下、右四个方向中的一个。在诸如Chrome、夸克、百分、Edge新版等浏览器下,任何一个盒子,它都可以将自己完整投射到四个方向中的任意一个方向,但不可以同时投射超过一个或更多的方向。这个属性很有价值,可惜到目前止,w3c尚未接受,火狐浏览器Firefox也不支持。
Firefox是一款优秀的浏览器,它是没有 box-reflect 属性,但它内置有 element(#id) 私有属性,通过此属性同样可以模拟出 box-reflect 效果。
下面的代码,基于chromium的浏览器均可完美将源盒子完整投射到右边,源盒子和投影之间的距离是20px:
<style>
.mama {
position: absolute;
padding: 10px;
width: 200px;
height: 120px;
border: 1px solid tan;
font: bold 2em sans-serif;
color: pink;
text-shadow: 1px 2px 2px #666;
-webkit-box-reflect: right 20px;
}
</style>
<div class="mama">
<p>花潮论坛</p>
</div>
但在火狐(Firefox)浏览器下,并没有投影效果,我们需要模拟一样,以使得同一组代码在chromium和Firefox下达到相同的效果。前面提到,Firefox 有一个 element(#id) 私有属性,它是用来“克隆”源盒子外貌的,通过另一个盒子的 background 属性实现:
background: -moz-element(#id名称) no-repeat;
-moz- 是 Firefox 在CSS中使用其私有属性的固定前缀,element 是元素,括号里是该元素的 id 在 CSS 中的名称,也可以只是 div 的 id 名称。例如,有一个 div,其 id="mama",则我们可以在另一个盒子 girl 中用 background 的方式“克隆” mama 表面上的一切:
.girl {
position: absolute;
width: 222px;
height: 142px;
left: 240px;
background: -moz-element(#mama) no-repeat;
transform: scale(-1,1);
}
核心部分就是 background 的 -moz-element(#mama) 这个私有属性,是它“克隆”了mama的外观;而 transform: scale(-1,1) 是让投影的镜像水平方向与源盒子反向,因为放在右边,所以垂直方向不改变。其余的宽高、左边值的定义,是基于 mama 的 CSS设定,padding和border都计算在里面,才能模仿出和 chromium 的 -webkit-box-reflect 产生的结果。
应该特别注意的是,transform: scale(x,y) 的应用是镜像反向的关键,如何反向取决于投射的方向,(x,y)的值在 1 和 -1 之间变换即可。
|
评分
-
| 参与人数 2 | 威望 +70 |
金钱 +140 |
经验 +70 |
收起
理由
|
梦缘
| + 20 |
+ 40 |
+ 20 |
很给力! |
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|