用-webkit-box-reflect制作倒影
1.只在webkit内核的浏览器上有效果
2.语法:
-webkit-box-reflect: <direction> <offset> <mask-box-image>
direction: 倒影偏移方向,有above、below、left和right四个值;
offset: 倒影偏移原元素边框边缘的距离,单位可为px或者%;
mask-box-image: 覆盖倒影的遮罩。
3.下面是demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用-webkit-box-reflect 制作倒影</title>
<style>
.photo-reflection{
cursor: pointer;
width: 200px;
height: 242px;
margin: 20px auto;
}
/*-webkit-box-reflect: <direction> <offset> <mask-box-image>*/
.photo-reflection img{
-webkit-box-reflect:below 0 -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.1, transparent), to(white));
}
.text-reflection{
margin-top: 240px;
font-family:"Microsoft YaHei";
color: rgba(250, 82, 117, 0.93);
-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%,
from(transparent), color-stop(0, transparent), to(rgba(3,3,3,.2)));
}
</style>
</head>
<body>
<div class="photo-reflection">
<img src="./qin_03.png">
<div class="text-reflection"><p>民族舞泛指产生并流传于民</p></div>
</div>
</body>
</html>
4.效果如下:
用-webkit-box-reflect制作倒影的更多相关文章
- background: inherit制作倒影、单行居中两行居左超过两行省略
1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...
- Photoshop制作倒影的两种方法
图片加了倒影,画面立刻变得生动起来.而用PS,制作倒影是如此的方便. 素材1 将素材1导入文档,ctrl+J复制图层,编辑-变换-垂直翻转将翻转的图层拖至下方 为翻转的图层添加图层蒙版,选中渐变工具, ...
- CSS3中制作倒影box-reflect
目前仅在Chrome.Safari和Opera浏览器下支持 box-reflect:none | <direction> <offset>? <mask-box-imag ...
- 使用css制作倒影
-webkit-mask 这个属性是相当强大的,所以详细的介绍超出了本文的范畴,它非常值得深入研究,因为它可以在实际应用中为你省掉很多时间. -webkit-mask让为一个元素添加蒙板成为可能,从而 ...
- 使用packer制作vagrant centos box
使用packer制作vagrant box:centos 制作vagrant box,网上有教程,可以自己step by step的操作.不过直接使用虚拟在VirtualBox中制作vagrant b ...
- 关于 CSS 反射倒影的研究思考
原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- css3倒影
使用CSS3制作倒影 img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from ...
- 使用Vagrant和VirtualBox一步步地创建一个Base Box
box集合 http://www.vagrantbox.es/ Vagrant和VirtualBox软件的安装步骤省略,去官网下载最新的版本然后下一步下一步地安装就行了,和正常的安装软件没有什么区别 ...
随机推荐
- python基础教程总结15——5 虚拟茶话会
聊天服务器: 服务器能接受来自不同用户的多个连接: 允许用户同时(并行)操作: 能解释命令,例如,say或者logout: 容易拓展 套接字和端口: 套接字是一种使用标准UNIX文件描述符(file ...
- 使用JPA + Eclipselink操作PostgreSQL数据库
首先确保您已经安装了PostgreSQL.您可以参考我这篇文章PostgreSQL扫盲教程. 使用Eclipse创建一个新的JPA project: Platform选择EclipseLink,作为J ...
- codeforces Gym 100286H Hell on the Markets
紫书上面的题,队友做的,WA了freopen..爆了int... UVA 1614 - Hell on the Markets 奇怪的股市(贪心,结论)
- duboo 配置文件
官方文档 http://dubbo.apache.org/en-us/docs/user/quick-start.html 自己的 <?xml version="1.0" e ...
- stm32F042 (二) 按键触发中断
已经实现GPIO口输出高低电平控制LED,这里实现按键触发中断来改变LED闪亮的频率,因为PB3连着LED,所以PB3的输出模式没有改变,随意选一个GPIO口PA7接按键产生中断.因为nucleo开发 ...
- Nginx: ubuntu系统上如何判断是否安装了Nginx?
问题描述:ubuntu系统上,如何查看是否安装了Nginx? 解决方法:输入命令行:ps -ef | grep nginx master process后面就是Nginx的安装目录. 延伸:1. 如何 ...
- Nginx超时配置
Nginx超时配置 1.client_header_timeout 语法client_header_timeout time 默认值60s 上下文http server 说明 指定等待client发送 ...
- 【Python学习之五】高级特性2(切片、迭代、列表生成器、生成器、迭代器)
2.迭代 如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration).在Python中,迭代是通过for ... in来完成的. ...
- 第二课:PHP 安装
PHP 安装 您需要做什么? 为了开始使用 PHP,您可以: 找一个支持 PHP 和 MySQL 的 Web 主机 在您自己的 PC 机上安装 Web 服务器,然后安装 PHP 和 MySQL 使用支 ...
- PHP分页类代码
今天为大家献上一段代码,这是一段php分页代码: <?php//创建分页类class Page { private $_all_num; ...