#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. java新特性之可变参数

    public class NewDemo01 {     public static void main(String[] args) {         System.out.print(" ...

  2. java计算器

       由于自己的实验报告 需要用Java来写一个实验报告.自己本没有怎么学过Java,但是学的话也就认真的学一下,毕竟技术这条路线是技多不压身.于是在网站上找来了一些资料,关于Java到底是干什么的, ...

  3. bzoj 2141 : 排队 分块

    题目链接 2141: 排队 Time Limit: 4 Sec  Memory Limit: 259 MBSubmit: 1169  Solved: 465[Submit][Status][Discu ...

  4. 用python 10min手写一个简易的实时内存监控系统

    简易的内存监控系统 本文需要有一定的python和前端基础,如果没基础的,请关注我后续的基础教程系列博客 文章github源地址,还可以看到具体的代码,喜欢请在原链接右上角加个star 腾讯视频链接 ...

  5. 使用VisualVM分析tomcat运行状况（1）

    VisualVM是一款java程序性能分析与调优工具,而且还是jdk中自带的工具之一. tomcat也是一个java程序,自然也可以用它来进行监控.不过这里还是会有些问题,tomcat有两种常用的期待 ...

  6. WebWorker SharedWorker ServiceWorker

    WebWorker 是什么? 为 JavaScript 引入线程技术 不必再用 setTimeout().setInterval().XMLHttpRequest 来模拟并行 Worker 利用类似线 ...

  7. 侯捷C++ Type traits（类型萃取

    泛型編程編出來的代碼,適用於任何「吻合某種條件限制」的資料型別.這已成為撰寫可復用代碼時的一個重要選擇.然而,總有一些時候,泛型不夠好 — 有時候是因為不同的型別差距過大,難以產生一致的泛化實作版本. ...

  8. 多线程中Local Store Slot(本地存储槽)

    在Java中有一种ThreadLocal机制,为每一个使用该变量的线程都提供一个变量值的副本,是每一个线程都可以独立地改变自己的副本,而不会和其它线程的副本冲突.从线程的角度看,就好像每一个线程都完全 ...

  9. 追踪神秘的成都Uber：月入2万元是现实还是传说

    4月6日,一个视频在网上疯转——在上海,明星佟大为驾驶着售价近100万元的特斯拉电动汽车,作为一名Uber的司机满市转悠着拉客. Uber——优步,如果你不知道这个词,那就OUT了.就是这样的一款软件 ...

  10. 传统web和mvc的区别