核心思想：嵌套盒子中的◇超过父盒子的部分隐藏。

第一种写法：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        div{

            width:100px;

            height:30px;

            background-color:#eee;

            position:relative;

        }

        i,s{

            text-decoration:none;

            font-style:normal;

        }

        i{

            position:absolute;

            right:0;

            top:12px;

            width:10px;

            height:7px;

            background-color:aliceblue;

            font:400 13px/13px "微软雅黑";

            overflow:hidden;

        }

        s{

            position:absolute;

            top:2px;

        }

    </style>

</head>

<body>

    <div>

        <i><s>◇</s></i>

    </div>

</body>

</html>

第二种写法：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        div{

            width:100px;

            height:30px;

            background-color:#eee;

            position:relative;

        }

        i,s{

            text-decoration:none;

            font-style:normal;

        }

        i{

            position:absolute;

            right:0;

            top:12px;

            width:10px;

            height:7px;

            background-color:aliceblue;

            font:400 13px/13px "微软雅黑";

            overflow:hidden;

        }

        s{

            display:block;

            margin-top:-6px;

        }

    </style>

</head>

<body>

    <div>

        <i><s>◇</s></i>

    </div>

</body>

</html>

效果：

注释：s标签必须转成块级元素，display的值必须是block。

CSS——◇demo的更多相关文章

  1. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  2. 【CSS Demo】网站页面变灰

    让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用. 实现效果(点击下面的按钮): 这里放一张图片作为效果展示: 其CSS代码如下: body{ -webkit-fil ...

  3. CSS demo:flaot &amp; clear float

    1,首先,我们布局主要的div块: 例如以下代码所看到的,我们在body里面写3几个基本div块,然后设置一些基本属性: 效果图: 2,增加基本浮动 如今我们想让红色div放到绿色div右边,我们在两 ...

  4. Less:优雅的写CSS代码

    css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...

  5. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  6. Html标签第二课css

    css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div  style=& ...

  7. 常用的CSS Hack

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  8. css font-weight原理

    为什么要记录一下?因为今天我要设置一个字符加粗,然后就用font-weight:200,没有任何效果.现在看来很可笑,400才相当于normal,200怎么加粗,奇怪的是也没有变细.所以得研究一下fo ...

  9. HTML 学习笔记 CSS样式（文本）

    CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...

随机推荐

  1. Drools介绍与使用

    Drools 是用 Java 语言编写的开放源码规则引擎,使用 Rete 算法对所编写的规则求值.Drools 允许使用声明方式表达业务逻辑.可以使用非 XML 的本地语言编写规则,从而便于学习和理解 ...

  2. 写给对<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">迷惑不解的小伙伴

    1.X-UA-Compatible X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过在meta中设置X-UA-Compatible的值,可以指定网页的 ...

  3. 【GC分析】Java GC日志查看

    Java中的GC有哪几种类型? 参数 描述 UseSerialGC 虚拟机运行在Client模式的默认值,打开此开关参数后, 使用Serial+Serial Old收集器组合进行垃圾收集. UsePa ...

  4. WINDOW 专家

    http://www.cnblogs.com/shanyou/category/725986.html

  5. 一个unity3d lightmap问题

    上周美术同学在使用unity3d制作lightmap的过程中,发现部分被lightmap影响的模型在移动端上效果与pc端不一致.当时我大概看了下,分析后,得到一个结论是“在移动端上lightmap的h ...

  6. Baum–Welch algorithm

    Baum–Welch algorithm 世界上只有一个巴菲特,也只有一家文艺复兴科技公司_搜狐财经_搜狐网 http://www.sohu.com/a/157018893_649112

  7. BMP图片的解析,关于压缩方式

    在做一个显示bmp图片到lcd屏的时候,发现有些bmp图显示不对. 同样是16bit bmp却有差异. 就查了一下格式. bmp文件格式 位图文件的组成 结构名称 符号 位图文件头(bitmap-fi ...

  8. go语言笔记——是c开发的 lex yacc进行词法和语法分析，go不支持函数和运算符重载，不支持类型继承，也不支持断言，还有泛型

    从 Go 1.0.3 版本开始,不再使用 8g,8l 之类的指令进行程序的构建,取而代之的是统一的 go build 和 go install 等命令,而这些指令会自动调用相关的编译器或链接器. 如果 ...

  9. ADTS结构

    ADTS全称是(Audio Data Transport Stream),是AAC的一种十分常见的传输格式.转载请注明来自:http://www.binkery.com/ ADTS内容及结构一般情况下 ...

  10. bzoj3771

    http://www.lydsy.com/JudgeOnline/problem.php?id=3771 生成函数... 其实就是多项式乘法...lrj书上有一个通俗的解释... 然后就是这个样子,我 ...