目录[1]定义[2]案例效果 [3]切图[4]实现 三层嵌套 两层嵌套 绝对定位 [5]效果定义 在border-radius出现之前,实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。 案例效果 切图实现方 ...
目录
[1]定义[2]案例效果 [3]切图[4]实现 三层嵌套 两层嵌套 绝对定位 [5]效果
实现方法
滑动门的实现共三种方法:三层嵌套、两层嵌套和绝对定位。
三层嵌套
三层嵌套,文字只能写到最里面的div里,适用于图片比较大或者拓展要求高,比如导航。
[注意1]要想让滑动门适用于多种场合,左右两个角必须透明,以此露出背景颜色,若是左右压中间,左右角的透明部分露出的是中间的颜色,所以只能改成中间压左右,然后中间用margin,不与左右相叠压。
[注意2]因为滑动门需要宽度自适应,对最外层的<div>用float或inline-block使其宽度由内容撑开
.boxL{ display: inline-block; background: url('boxL.png') no-repeat left 0 ;}.boxR{ background: url('boxR.png') no-repeat right 0;}.box{ background: url('boxM.jpg') repeat-x; font: 14px/30px "宋体"; color: white; padding: 1px 10px 0; margin: 0 8px;}
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:实现滑动门的三种方法
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。