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

第一种写法：

<!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. CF558E A simple task 线段树

    这道题好猥琐啊啊啊啊啊啊 写了一个上午啊啊啊啊 没有在update里写pushup啊啊啊啊 题目大意: 给你一个字符串s,有q个操作 l r 1 :把sl..rsl..r按升序排序 l r 0 :把s ...

  2. 你的ExcelUtil简单、高效、易扩展吗

    你的ExcelUtil简单.高效.易扩展吗 Author: Dorae Date: 2018年10月23日12:30:15 转载请注明出处 一.背景 最近接到了和Excel导出相关的需求,但是: 项目 ...

  3. [bzoj3893][Usaco2014 Dec]Cow Jog_暴力

    Cow Jog bzoj-3893 Usaco-2014 Dec 题目大意:题目链接. 注释:略. 想法: 先按照坐标排序. 我们发现每个牛只会被后面的牛影响. 所以我们考虑逆向枚举. 记录一下i+1 ...

  4. 1010 过河卒 2002年NOIP全国联赛普及组codevs

    1010 过河卒  2002年NOIP全国联赛普及组codevs 题目描述 Description 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点 ...

  5. mybatis指定jdbctype

    MyBatis 插入空值时,需要指定JdbcType mybatis insert空值报空值异常,但是在pl/sql不会提示错误,主要原因是mybatis无法进行转换 所以在MyBatis映射文件中要 ...

  6. OSX: node中安装zeromq

    1. brew install pkg-config2. brew install zmq3. export PKG_CONFIG_PATH="/usr/local/lib/pkgconfi ...

  7. AutoCAD如何移动坐标原点

    通常在CAD画图设计时,坐标原点都默认在左下角,下面就来分享一下在CAD如何把左下角的坐标原点移动到我们画的图形中心点: 1.输入坐标原点移动命令UCS: 按回车确认后,再输入M(就是移动的意思): ...

  8. 用BOOST_FOREACH简化遍历操作

    BOOST_FOREACH能够方便的遍历STL容器. 仅仅须要头文件: #include <boost/foreach.hpp> 然后遍历容器vector/list/set/deque/s ...

  9. 字节数组byte[]和整型,浮点型数据的转换——Java代码

    近期在写C++ socket和java socket之间的通信程序,涉及到整数浮点数的传输.须要从字节数组还原数据,查了一些资料.总结例如以下 1.       整数和浮点数的机器表示 在机器内部.不 ...

  10. oc70--NSArray1

    // // main.m // NSArray是不可变的,一旦初始化完毕,就不能添加和删除了.类似于NSString和NSMutilString. #import <Foundation/Fou ...