#p1:before{
content: "哈哈哈 ";
color: red;
}
#p1:after{
content: "哈哈哈";
color: #452dff;
}
content: url('img.jpg');
content: attr(href);
content: " (" attr(href) ")"

太极图

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         #p1:before{

             content: "哈哈哈 ";

             color: red;

         }

         #p1:after{

             content: "哈哈哈";

             color: #452dff;

         }

        #a1:after{

            content: attr(href);

        }

         #yin-yang {

             width: 96px;

             height: 48px;

             background: #eee;

             border-color: red;

             border-style: solid;

             border-width: 2px 2px 50px 2px;

             border-radius: 100%;

             position: relative;

         }

         #yin-yang:before {

             content: "";

             position: absolute;

             top: 50%;

             left:;

             background: #eee;

             border: 18px solid red;

             border-radius: 100%;

             width: 12px;

             height: 12px;

         }

         #yin-yang:after {

             content: "";

             position: absolute;

             top: 50%;

             left: 50%;

             background: red;

             border: 18px solid #eee;

             border-radius:100%;

             width: 12px;

             height: 12px;

         }

     </style>

 </head>

 <body>

 <p id="p1">我是一个兵  </p>

 <a id="a1" href="https://www.baidu.com">百度</a>

 <br>

 <div id="yin-yang"></div>

 </body>

 </html>

分割线

.mask { overflow: hidden; height: 20px; }
.mask:after { content: ''; display: block; margin: -25px auto 0; width: 100%; height: 25px; border-radius: 125px/12px; box-shadow: 0 0 8px black; }

随机推荐

  1. linux杂记（四）热键[Tab],[ctrl]-c,[ctrl]-d，在线求助man page/info page

    [Tab]按键 他具有[命令补全](接在一串指令的第一个字后面)与[档案补齐](接在第一串指令的第二字以后时)的功能.如 [KANO@kelvin ~]$ ca[tab][tab] cabextrac ...

  2. Pro/Engineer wildfire 5.0 野火版系列下载及安装方法

    三.PTC Pro/Engineer wildfire 5.0 M030 野火版最新版 DVD 下载(多国语言) 1.野火下载站下载32&64位下载:[32位] http://down.pro ...

  3. C++面试经常涉及的概念1

    1.new.delete.malloc.free关系 delete会调用对象的析构函数,和new对应.free只会释放内存,new调用构造函数.malloc与free是C++/C语言的标准库函数,ne ...

  4. ExpandableListView(一)替换系统默认的箭头

    很多朋友可能在android开发中,用过ExpandableListView这个组件,这个组件功能强大,比传统的ListView有好多优势.然而在开发中,我相信有好多人,包括我个人都会遇到下面的一些问 ...

  5. <td style="word-break:break-all"> 在html中控制自动换行

    在html中控制自动换行   其实只要在表格控制中添加一句 <td style="word-break:break-all">就搞定了. 其中可能对英文换行可能会分开一 ...

  6. Swift中的UIKit重力学

    前言: 重力学这个名词不论在哪个行业领域听起来似乎都非常高大上. 那么在Swift中的重力学是什么呢?那就是将我们移动端屏幕上毫无生命力的东西也置于万有引力中.使它们能够展现出好像真的因为引力而向下坠 ...

  7. 1.语言概述-JavaScript权威指南笔记

    上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...

  8. java 汉字转拼音

    先决条件: pinyin4j.jar(Pinyin4j是一个流行的Java库,支持中文字符和拼音之间的转换.拼音输出格式可以定制.) 下载地址:http://pan.baidu.com/share/l ...

  9. error 和 exception 有什么区别?

    1.error指恢复不是不可能但非常困难的情况下的一种严重错误.比如内存溢出,不指望程序可以处理这样的情况. 2.exception表示一种设计或者实现问题,如果程序正常运行,则从不会发生.

  10. centos7 环境搭建

    centos7 环境搭建    CentOS-7-x86_64-DVD-1511.iso    vmware121. 安装    使用iso安装系统:2. 修改yum源到光盘        先把光盘C ...