CSS3图片反射box-reflect属性

CSS3中有一个box-reflect属性,也就是图片反射,主要的效果是将一张图片反射到对应面并且可以设置想要的一些效果(如:渐变)等

语法

box-reflect:包括三个值

  • direction 定义方向

    • above 反射到对象的上面
    • below 反射到对象的下面
    • left 反射到对象的左面
    • right 反射到对象的又面
  • offset定义反射偏移的距离

    • 默认为0 也可以为负
  • mask-box-image定义遮罩图像

 原图:

示列一

below反射到对象的下方,这是方向一类代码;不管上面左右原理是一致的,大家根据语法修改即可




	
		
		
		
		Document
		
	

	
		
	

 效果:

CSS3图片反射box-reflect属性_第1张图片

示列二

此代码及效果是设置偏移量;大家也可以理解为反射对象的间隔距离

此处设置的是20像素




	
		
		
		
		Document
		
	

	
		
	

效果: 

 CSS3图片反射box-reflect属性_第2张图片

 

示列三

此代码及效果是将反射对象的图片做了一个渐变效果




	
		
		
		
		Document
		
	

	
		
	

效果:

CSS3图片反射box-reflect属性_第3张图片

你可能感兴趣的:(css3,前端)