• 吴裕雄--天生自然PHP-MySQL-JavaScript学习笔记:支持CSS3的高级CSS


    <!DOCTYPE html>
    <html> <!-- backgroundimages.html -->
      <head>
        <title>CSS3 Multiple Backgrounds Example</title>
        <style>
          .border {
            font-family:'Times New Roman';
            font-style :italic;
            font-size  :170%;
            text-align :center;
            padding    :60px;
            width      :350px;
            height     :500px;
            background :url('b1.gif') top    left  no-repeat,
                        url('b2.gif') top    right no-repeat,
                        url('b3.gif') bottom left  no-repeat,
                        url('b4.gif') bottom right no-repeat,
                        url('ba.gif') top          repeat-x,
                        url('bb.gif') left         repeat-y,
                        url('bc.gif') right        repeat-y,
                        url('bd.gif') bottom       repeat-x
          }
        </style>
      </head>
      <body>
        <div class='border'>
          <h1>Employee of the month</h1>
          <h2>Awarded To:</h2>
          <h3>__________________</h3>
          <h2>Date:</h2>
          <h3>___/___/_____</h3>
        </div>
      </body>
    </html>
    <!DOCTYPE html>
    <html> <!-- borderradius.html -->
      <head>
        <title>CSS3 Border Radius Examples</title>
        <style>
          .box {
            margin-bottom:10px;   
            font-family  :'Courier New', monospace;
            font-size    :12pt;
            text-align   :center;
            padding      :10px;
            width        :380px;
            height       :75px;
            border       :10px solid #006;
          }
          .b1 {
            -moz-border-radius   :40px;
            -webkit-border-radius:40px;
            border-radius        :40px;
          }
          .b2 {
            -moz-border-radius   :40px 40px 20px 20px;
            -webkit-border-radius:40px 40px 20px 20px;
            border-radius        :40px 40px 20px 20px;
          }
          .b3 {
            -moz-border-radius-topleft        :20px;
            -moz-border-radius-topright       :40px;
            -moz-border-radius-bottomleft     :60px;
            -moz-border-radius-bottomright    :80px;
            -webkit-border-top-left-radius    :20px;
            -webkit-border-top-right-radius   :40px;
            -webkit-border-bottom-left-radius :60px;
            -webkit-border-bottom-right-radius:80px;
            border-top-left-radius            :20px;
            border-top-right-radius           :40px;
            border-bottom-left-radius         :60px;
            border-bottom-right-radius        :80px;
          }
          .b4 {
            -moz-border-radius-topleft        :40px 20px;
            -moz-border-radius-topright       :40px 20px;
            -moz-border-radius-bottomleft     :20px 40px;
            -moz-border-radius-bottomright    :20px 40px;
            -webkit-border-top-left-radius    :40px 20px;
            -webkit-border-top-right-radius   :40px 20px;
            -webkit-border-bottom-left-radius :20px 40px;
            -webkit-border-bottom-right-radius:20px 40px;
            border-top-left-radius            :40px 20px;
            border-top-right-radius           :40px 20px;
            border-bottom-left-radius         :20px 40px;
            border-bottom-right-radius        :20px 40px;
          }
        </style>
      </head>
      <body>
        <div class='box b1'>
          border-radius:40px;
        </div>
    
        <div class='box b2'>
          border-radius:40px 40px 20px 20px;
        </div>
    
        <div class='box b3'>
          border-top-left-radius &nbsp;&nbsp;&nbsp;:20px;<br>
          border-top-right-radius &nbsp;&nbsp;:40px;<br>
          border-bottom-left-radius :60px;<br>
          border-bottom-right-radius:80px;
        </div>
    
        <div class='box b4'>
          border-top-left-radius &nbsp;&nbsp;&nbsp;:40px 20px;<br>
          border-top-right-radius &nbsp;&nbsp;:40px 20px;<br>
          border-bottom-left-radius :20px 40px;<br>
          border-bottom-right-radius:20px 40px;
        </div>
      </body>
    </html>
    <!DOCTYPE html>
    <html> <!—- multiplecolumns.html -->
      <head>
        <title>Multiple Columns</title>
        <style>
          .columns {
            text-align          :justify;
            font-size           :16pt;
            -moz-column-count   :3;
            -moz-column-gap     :1em;
            -moz-column-rule    :1px solid black;
            -webkit-column-count:3;
            -webkit-column-gap  :1em;
            -webkit-column-rule :1px solid black;
            column-count        :3;
            column-gap          :1em;
            column-rule         :1px solid black;
          }
        </style>
      </head>
      <body>
        <div class='columns'>
          Now is the winter of our discontent
          Made glorious summer by this sun of York;
          And all the clouds that lour'd upon our house
          In the deep bosom of the ocean buried.
          Now are our brows bound with victorious wreaths;
          Our bruised arms hung up for monuments;
          Our stern alarums changed to merry meetings,
          Our dreadful marches to delightful measures.
          Grim-visaged war hath smooth'd his wrinkled front;
          And now, instead of mounting barded steeds
          To fright the souls of fearful adversaries,
          He capers nimbly in a lady's chamber
          To the lascivious pleasing of a lute.
        </div>
      </body>
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <title>Transitioning on hover</title>
        <style>
          #square {
            position          :absolute;
            top               :50px;
            left              :50px;
            width             :100px;
            height            :100px;
            padding           :2px;
            text-align        :center;
            border-width      :1px;
            border-style      :solid;
            background        :orange;
            transition        :all .8s ease-in-out;
            -moz-transition   :all .8s ease-in-out;
            -webkit-transition:all .8s ease-in-out;
            -o-transition     :all .8s ease-in-out;
            -ms-transition    :all .8s ease-in-out;
          }
          #square:hover {
            background        :yellow;
            -moz-transform    :rotate(180deg);
            -webkit-transform :rotate(180deg);
            -o-transform      :rotate(180deg);
            -ms-transform     :rotate(180deg);
            transform         :rotate(180deg);
          }
        </style>
      </head>
      <body>
        <div id='square'>
          Square shape<br>
          created using<br>
          a simple div<br>
          element with<br>
          a 1px border
        </div>
      </body>
    </html>
  • 相关阅读:
    想让进程后台运行,试试Linux的nohup命令,3分钟学会。
    面试官:你能说一下Redis的常见应用场景吗?
    面试被问MySQL 主从复制,怎么破?
    Spring Boot 解决跨域问题的 3 种方案!
    Kafka如果丢了消息,怎么处理的?
    惊呆,这样操作 Nginx 并发数就能达到3w?
    easyexcel 自动设置列宽(转)
    Ubuntu18.04自适应VMware调整桌面大小
    IDEA将maven项目打包时同时带上项目的maven依赖(转)
    python 定时框架APScheduler
  • 原文地址:https://www.cnblogs.com/tszr/p/12382929.html
Copyright © 2020-2023  润新知