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

第一种写法：

<!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. H - Tickets

    Jesus, what a great movie! Thousands of people are rushing to the cinema. However, this is really a ...

  2. ArcGIS 10.1 for Server安装教程系列—— Linux下的单机安装

    http://www.oschina.net/question/565065_81231      因为Linux具有稳定,功能强大等特性,因此常常被用来做为企业内部的服务器,我们的很多用户也是将Ar ...

  3. Win7 无法安装Office source engine 足够的权限安装系统服务怎么办

    运行CMD,输入命令:sc delete ose 重试即可.

  4. Tomcat手工搭建Jsp和Servlet程序

    要执行J2EE的程序,就必须安装相关的容器.而怎样选择JSP+Servlet模式.Tomcat是非常重要的选择之中的一个,是世界上最为广泛的Servlet和JSP容器. 下载: 1. URL: htt ...

  5. chosen.jquery.js 使用笔记

    using chosen.jquery.js using chosen.jquery.css html: <label for="MeetingUsersList" clas ...

  6. how to use webpart container in kentico

    https://docs.kentico.com/k11/developing-websites/developing-websites-using-the-portal-engine/using-w ...

  7. CDOJ 1324 卿学姐与公主（分块）

    CDOJ 1324 卿学姐与公主(分块) 传送门: UESTC Online Judgehttp://acm.uestc.edu.cn/#/problem/show/1324 某日,百无聊赖的卿学姐打 ...

  8. JavaScript检查是否包含某个字符

    转自:http://my.oschina.net/u/1450300/blog/389325 indexOf用法: indexOf 方法返回一个整数值,指出 String 对象内子字符串的开始位置.如 ...

  9. hdu 6115（LCA 暴力）

    Factory Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others)Total ...

  10. [BZOJ 1691] 挑剔的美食家

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1691 [算法] 不难想到如下算法 : 将所有牛和牧草按鲜嫩程度降序排序,按顺序扫描, ...