今天看到一个网站的标记功能，觉得很不错，先记录一下，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标记功能的实现（像手工标记的一样）的更多相关文章

  1. MindManager主题标记功能怎么使用

    我们在使用MindManager制作思维导图的过程中,经常需要对主题的类别,优先程度等进行整理,毫无疑问,这是一项繁琐却又不得不做的工作.今天小编为大家带来了MindManager主题整理的一些小技巧 ...

  2. （转）Java回收对象的标记 和 对象的二次标记过程

    Java回收对象的标记 和 对象的二次标记过程 二次标记 针对这个问题,虚拟机的做法是进行两次标记,即第一次标记不在“关系网”中的对象.第二次的话就要先判断该对象有没有实现finalize()方法了, ...

  3. 浅谈Java回收对象的标记和对象的二次标记过程_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 一.对象的标记 1.什么是标记?怎么标记? 第一个问题相信大家都知道,标记就是对一些已死的对象打上记号,方便垃圾收集器的 ...

  4. 【pytest系列】- mark标记功能详细介绍

    如果想从头学起pytest,可以去看看这个系列的文章! https://www.cnblogs.com/miki-peng/category/1960108.html mark标记 ​ 在实际工作中, ...

  5. 不升级Element-UI 版本为时间选择器增加标记功能

    Element-UI里的date-picker是个优秀的时间选择器,支持的选项很多,定制型很强.不过date-picker在2.12版本之前并不支持自定义单元格样式,也就是2.12的cellClass ...

  6. ECharts 图表设置标记的大小 symbolSize 和获取标记的值

    ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  7. pytest框架使用教程

    Pytest框架 一.简介 pytest:基于unittest之上的单元测试框架 有什么特点? 自动发现测试模块和测试方法 断言更加方便,assert + 表达式,例如 assert 1 == 1 灵 ...

  8. Git超实用总结，再也不怕记忆力不好了

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 Git 是什么? Git 是一个分布式的代码管理容器,本地和远端都保有一份相同的代码. Git 仓库主要是 ...

  9. 【转】Git超实用总结，再也不怕记忆力不好了

    [转]Git超实用总结,再也不怕记忆力不好了 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 Git 是什么? Git 是一个分布式的代码管理容器,本地和 ...

随机推荐

  1. Android环境搭建（大学授课课件）

    前面一直没有提过如何搭建Android开发环境,其实这些网上一大堆,随便一搜就是很多大神的详细介绍.本人过于懒惰,拿出大学授课课件供大家参考.非原创 位)   下载地址: sdk:http://pan ...

  2. 对strom的理解

    1.什么是strom: storm是一个分布式实时计算系统,用户只需要提供自己的插件(例如一个jar包,其中编写用户自己的逻辑代码),然后将它部署到storm服务器上,storm的master服务器就 ...

  3. codeforces553C Love Triangles

    题目链接:codeforces553C Love Triangles 我们来看一下对于一个合法三角形可能出现的边 我们发现,在确定了两边之后,第三条边是什么也就随之确定了 我们用\(1\)表示\(lo ...

  4. 【XSY2693】景中人 区间DP

    题目描述 平面上有\(n\)个点,你要用一些矩形覆盖这些点,要求: 每个矩形的下边界为\(y=0\) 每个矩形的大小不大于\(s\) 问你最少要用几个矩形. \(n\leq 100,1\leq y\l ...

  5. SCOI2016幸运数字（树剖/倍增/点分治+线性基）

    题目链接 loj luogu 题意 求树上路径最大点权异或和 自然想到(维护树上路径)+ (维护最大异或和) 那么有三种方法可以选择 1.树剖+线性基 2.倍增+线性基 3.点分治+线性基 至于线性基 ...

  6. 洛谷SP22343 NORMA2 - Norma（分治，前缀和）

    洛谷题目传送门 这题推式子恶心..... 考虑分治,每次统计跨过\(mid\)的所有区间的答案和.\(i\)从\(mid-1\)到\(l\)枚举,统计以\(i\)为左端点的所有区间. 我们先维护好\( ...

  7. 【BZOJ5318】[JSOI2018]扫地机器人（动态规划）

    [BZOJ5318][JSOI2018]扫地机器人(动态规划) 题面 BZOJ 洛谷 题解 神仙题.不会.... 先考虑如果一个点走向了其下方的点,那么其右侧的点因为要被访问到,所以必定只能从其右上方 ...

  8. Dynamic CRM 2015学习笔记（6）没有足够的权限 - 您没有访问这些记录的权限。请联系 Microsoft Dynamics CRM 管理员

    我们经常遇到下面这种问题:没有足够的权限 - 您没有访问这些记录的权限.请联系 Microsoft Dynamics CRM 管理员.  下面将详细介绍下如何解决这种问题:进不了CRM系统:进了CRM ...

  9. 深挖JDK动态代理(一)

     最近在研究RPC框架,避免不了的就是在RPC调用中使用最多的则是动态代理的机制了,基于此,我们先来研究一下JDK动态代理 我们先来尝试着编写一下JDK动态代理的代码 1. 由于JDK动态代理是基于接 ...

  10. Android 架构 -- Room

    gradle依赖: // add for room implementation "android.arch.persistence.room:runtime:1.1.1" // ...