css你可能不知道的属性

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

语法

box-reflect:包括三个值

  • direction 定义方向

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

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

原图:

1.jpg

示列一

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

代码:

```javascript

Document

```

效果图

1.png

示列二

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

此处设置的是20像素

代码:

```javascript

Document

```

效果图:

2.png

示列三

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

代码:

```javascript

Document

```

效果图:

3.png

今天CSS相关的内容就分享到这儿了,如果有帮助到你;那么就请您给我点个赞吧!我们下期再见

往期文章

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值