html 字体显示倒影,用CSS3的box-reflect设置文字倒影效果的方法讲解
语法:
CSS Code复制内容到剪贴板
box-reflect:none| ? ?
=above|below|left|rightright
= |
=none| | | | |
默认值:none
适用于:所有元素
继承性:无
取值:
none:无倒影
Demo: 简单图片倒影 See with Webkit
above:指定倒影在对象的上边
below:指定倒影在对象的下边
left:指定倒影在对象的左边
right:指定倒影在对象的右边
Demo: 图片与倒影间隔 See with Webkit
:用长度值来定义倒影与对象之间的间隔。可以为负值
:用百分比来定义倒影与对象之间的间隔。可以为负值
Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit
none:无遮罩图像
:使用绝对或相对地址指定遮罩图像。
:使用线性渐变创建遮罩图像。
:使用径向(放射性)渐变创建遮罩图像。
:使用重复的线性渐变创建背遮罩像。
:使用重复的径向(放射性)渐变创建遮罩图像。
如果你需要一个简单倒影,你可以这样做:
代码
CSS Code复制内容到剪贴板
box-reflect:below;
效果
注意设置倒影元素的padding是会影响倒影位置的
允许你定义倒影与元素之间的距离:
代码
CSS Code复制内容到剪贴板
box-reflect:below10px;
效果
允许你用Gradient图像或image作为遮罩:
代码
CSS Code复制内容到剪贴板
box-reflect:below1pxlinear-gradient(transparent,transparent50%,rgba(0,0,0,.3));
效果
html 字体显示倒影,用CSS3的box-reflect设置文字倒影效果的方法讲解相关推荐
- android 字体倒影,Android开发中怎么实现一个文字倒影效果
Android开发中怎么实现一个文字倒影效果 发布时间:2020-11-25 17:18:19 来源:亿速云 阅读:140 作者:Leah 这期内容当中小编将会给大家带来有关Android开发中怎么实 ...
- 6s手机为什么不显示4g网络连接服务器,苹果iPhone6S 设置4G网络的方法
苹果iPhone6S 如何设置4G网络?现在的手机网络都有2G.3G.4G等类型供用户选择,在这些类型当中4G网络是速度最快的网络类型,有时候用户会遇到手机在4G网络覆盖范围内,却无法连接4G的情况, ...
- js java 改变字体颜色,js设置文字颜色的方法示例
本文实例讲述了js设置文字颜色的方法.分享给大家供大家参考,具体如下: aaabbbccc 不允许在h1标签中添加任何字符,可以通过css或js定义,使其aaa为红色bbb为黄色ccc为蓝色 /p&g ...
- html显示word内容自动换行,word-wrap属性怎么设置文字自动换行?
可以在需要换行的元素内,将word-wrap属性的值设置为break-word来设置文字自动换行..下面本篇文章就来给大家介绍一下word-wrap属性,希望对大家有所帮助. word-wrap属性设 ...
- STM32开发笔记109:在STM32CubeIDE中调整字体显示
文章目录 前言 1.打开首选项 2.对字体进行编辑 3.找到合适的字体 4.完成设置 前言 STM32CubeIDE在初始时,中文字体显示比较小,而且不美观,可通过如下方法进行调整. 1.打开首选项 ...
- html字体加粗字号为2,【css】文字基本样式(颜色、倾斜、加粗、字号、行高、字体)...
一.字体基本样式 首先我们先放置一些文字,基本所有的标签都可以设置字体样式的,这里就使用标签 和 来做示范啦. O泡时间到! 给我O泡给我O泡,O泡果奶OOO! 图1 基本文字效果 注意,文字属性都是 ...
- box-sizing是CSS3的box属性
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...
- html中投影效果图,利用CSS3(box shadow)制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
- 潘多拉开发板STM32L475之LCD与GBK(含GB2312)字体显示
一.GBK字体的内码获取 #include <stdio.h> #include <stdint.h> int main(void) { uint8_t *str=" ...
最新文章
- The power of single molecule real-time sequencing technology in the de novo assembly of a eukaryotic
- Qt小传——从诞生到发展、繁荣
- 融合 MF 和 RNN 的电影推荐系统
- HihoCoder - 1591 锦标赛(最大费用最大流)
- 前端第一天 HTML基础
- C语言指针(1)嵌入式linux
- PHP导航猫网址导航系统源码V2.4.5
- 汇编语言 HelloWorld (详细注释版)
- getFields和getDeclaredFields
- js数组获取index_想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS...
- Drools(2):Drools快速入门
- Android CheckBoxPreference设置默认值会触发持久化以及其内部实现逻辑
- 很好的--张量(Tensor)的技术以及它在不同场景中的应用--转载贪心科技
- python累乘怎么写_怎么编写Python关于累乘的程序?
- android 中文转首字母,Android开发 - 汉字转拼音首字母
- NCTF-Writeup
- 游戏策划在游戏的开发过程中扮演什么角色?——游戏策划入门
- 数学家们是怎么玩趣味拼图游戏的?
- 相对定位(relative)和绝对定位(absolute)的区别
- API MISUSE: <CBCentralManager: 0x000000000> can only accept this command while in the powered on