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

第一种写法：

<!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. iptables中增加/删除/查询/修改的基本操作

    虽然在Ubuntu使用了UFW来简化iptables的操作,但是UFW只针对防火墙方面,转发方面没有涉及,所以要弄懂其中的原理,还是必须回归到iptables中.CentOS也是如此.下面是针对ipt ...

  2. Servlet监听器（Listener）实例

    以下内容是翻译自http://www.journaldev.com/1945/servletcontextlistener-servlet-listener-example: 说明:web.xml的加 ...

  3. canvas裁剪之后的base64转换为上传文件blob对象

    function convertBase64UrlToBlob(urlData){ var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转 ...

  4. VS2017 +NetCore2.2.0+WebApi项目整合SwaggerUI 以及遇到的坑

    1.新建一个WebApi项目,这里不说了. 2.打开项目nuget管理控制台,在 https://www.nuget.org/ 搜索swagger的包:Swashbuckle.AspNetCore , ...

  5. Unity3D Asset文件导出3DMax 可编辑格式

    本文章由cartzhang编写,转载请注明出处. 全部权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/60878354 作者:car ...

  6. 第6章 TCP/IP路由协议故障处理

    第6章 TCP/IP路由协议故障处理 一.缺省网关 当包的目的地址不在路由器的路由表中,如路由器配置了缺省网关,则转发到缺省网关,否则就丢弃. Show ip route :查看Cisco路由器的缺省 ...

  7. SQL 2012中文乱码

    MS SQL插入汉字的时候.常常会遇到部分汉字变成了乱码问号了, 所以在安装数据库或者在创建表的时候须要注意一下几点: 1.保存汉字的字段要用NVARCHAR.NCHAR.NTEXT等.插入的时候要用 ...

  8. C++对象模型——Template中的名称决议方式 (第七章)

    Template中的名称决议方式 (Name Resolution within a Template) 必须可以区分下面两种意义,一种是C++ Standard所谓的"sope of th ...

  9. shell 切割文件

    [root@hadoop2 xiaole_chk_url]# cat looh.index.splitfile.sh loop_c=0loop_step=10001loop_tag=0str_head ...

  10. Android连接热点的Socket文件传输

    最近把测试丢过来的种种BUG解决后,终于有时间去研究研究Socket通信,再加上以前做的WiFi连接和热点开启,于是有了现在的这篇博文:创建热点发送文件,让另一台手机连接热点接收文件. 效果图: 两台 ...