Mark标记功能的实现(像手工标记的一样)
今天看到一个网站的标记功能,觉得很不错,先记录一下,emm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
mark {
position: relative;
display: inline-block;
z-index: 2
}
mark:before,mark:after {
content: ' ';
display: block;
height: 90%;
width: 100%;
margin-left: -3px;
margin-right: -3px;
position: absolute;
z-index: -1
}
mark.highlight {
background-color: rgba(179,213,255,0.4);
border-top-right-radius: 28%;
border-bottom-right-radius: 60%;
border-bottom-left-radius: 90%;
border-top-left-radius: 19%
}
mark.highlight:before {
height: .7em;
top: 5px;
left: -1px;
background: rgba(179,213,255,0.5);
border-top-right-radius: 30%;
border-bottom-right-radius: 17%;
border-bottom-left-radius: 24%;
border-top-left-radius: 16%;
transform: rotate(1deg)
}
mark.highlight:after {
height: .8em;
top: .3em;
right: -4px;
background: rgba(179,213,255,0.8);
border-top-right-radius: 20%;
border-bottom-right-radius: 90%;
border-bottom-left-radius: 28%;
transform: rotate(-1deg)
}
mark.underline {
background-color: transparent
} mark.underline:before {
height: .12em;
top: .98em;
left: 6px;
background: rgba(179,213,255,0.8);
transform: rotate(-2deg)
}
mark.underline:after {
height: .18em;
top: 1em;
left: -2px;
background: rgba(179,213,255,0.8);
border-bottom-left-radius: 6%;
border-bottom-right-radius: 16%;
border-top-left-radius: 90%;
transform: rotate(-1deg)
}
</style>
</head>
<body>
<h2>
Emma HQ:
<mark class="highlight">Command central</mark>
for your marketing
</h2>
<h1>
Email marketing that works for
<mark class="underline">you</mark>
</h1>
</body>
</html>
Mark标记功能的实现(像手工标记的一样)的更多相关文章
- MindManager主题标记功能怎么使用
我们在使用MindManager制作思维导图的过程中,经常需要对主题的类别,优先程度等进行整理,毫无疑问,这是一项繁琐却又不得不做的工作.今天小编为大家带来了MindManager主题整理的一些小技巧 ...
- (转)Java回收对象的标记 和 对象的二次标记过程
Java回收对象的标记 和 对象的二次标记过程 二次标记 针对这个问题,虚拟机的做法是进行两次标记,即第一次标记不在“关系网”中的对象.第二次的话就要先判断该对象有没有实现finalize()方法了, ...
- 浅谈Java回收对象的标记和对象的二次标记过程_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 一.对象的标记 1.什么是标记?怎么标记? 第一个问题相信大家都知道,标记就是对一些已死的对象打上记号,方便垃圾收集器的 ...
- 【pytest系列】- mark标记功能详细介绍
如果想从头学起pytest,可以去看看这个系列的文章! https://www.cnblogs.com/miki-peng/category/1960108.html mark标记 在实际工作中, ...
- 不升级Element-UI 版本为时间选择器增加标记功能
Element-UI里的date-picker是个优秀的时间选择器,支持的选项很多,定制型很强.不过date-picker在2.12版本之前并不支持自定义单元格样式,也就是2.12的cellClass ...
- ECharts 图表设置标记的大小 symbolSize 和获取标记的值
ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- pytest框架使用教程
Pytest框架 一.简介 pytest:基于unittest之上的单元测试框架 有什么特点? 自动发现测试模块和测试方法 断言更加方便,assert + 表达式,例如 assert 1 == 1 灵 ...
- Git超实用总结,再也不怕记忆力不好了
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 Git 是什么? Git 是一个分布式的代码管理容器,本地和远端都保有一份相同的代码. Git 仓库主要是 ...
- 【转】Git超实用总结,再也不怕记忆力不好了
[转]Git超实用总结,再也不怕记忆力不好了 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 Git 是什么? Git 是一个分布式的代码管理容器,本地和 ...
随机推荐
- Dirichlet's Theorem on Arithmetic Progressions POJ - 3006 线性欧拉筛
题意 给出a d n 给出数列 a,a+d,a+2d,a+3d......a+kd 问第n个数是几 保证答案不溢出 直接线性筛模拟即可 #include<cstdio> #inclu ...
- 洛谷P1123取数游戏题解
题目 这是一道简单的搜索题,考查的还是比较基础的东西,其时搜索有时候并不难写,主要是要想到怎么搜.比如这个题,如果想二维四个方向搜则没有头绪,反之因为搜索是用递归实现的,所以我们可以使用递归的特性,把 ...
- Codeforces Round #543 Div1题解(并不全)
Codeforces Round #543 Div1题解 Codeforces A. Diana and Liana 给定一个长度为\(m\)的序列,你可以从中删去不超过\(m-n*k\)个元素,剩下 ...
- 【LOJ#2542】[PKUWC2018]随机游走(min-max容斥,动态规划)
[LOJ#2542][PKUWC2018]随机游走(min-max容斥,动态规划) 题面 LOJ 题解 很明显,要求的东西可以很容易的进行\(min-max\)容斥,那么转为求集合的\(min\). ...
- thinkphp5 上传服务器后 Access denied
服务器报 Access denied,要么报 No input files,但是在网上查了查说是将 PHP 的cgi.fix_pathinfo 改成 1 即可,但是改成 1 显然是有解析漏洞的,尝试寻 ...
- java 判断元素是否在数组内
一,先转为List,再使用contains()方法 String[] strArr = new String[] { "a", "b", "c&quo ...
- 洛谷P2336 喵星球上的点名
解:SAM + 线段树合并 + DFS序. 姓和名之间插入特殊字符,转化为下题: 给定串集合S,T,问S中每个串包含了T中的几个串?T中每个串被多少个S中的串包含? 解:对S建广义SAM,并线段树合并 ...
- A1135. Is It A Red-Black Tree
There is a kind of balanced binary search tree named red-black tree in the data structure. It has th ...
- 【POJ2226】Muddy Fields
题目大意:给定一个 N*M 的图,图中有一些格子不能被任何东西覆盖,现有一些宽度为 1,长度任意的骨牌覆盖这些可以被覆盖的格子,骨牌之间可以重叠,求将所有可以被覆盖的格子覆盖所需的最小骨牌数是多少. ...
- [luogu4018][Roy&October之取石子]
题目链接 思路 这个题思路挺巧妙的. 情况一: 首先如果这堆石子的数量是1~5,那么肯定是先手赢.因为先手可以直接拿走这些石子.如果石子数量恰好是6,那么肯定是后手赢.因为先手无论怎样拿也无法直接拿走 ...