1. <em id="2qvri"><tr id="2qvri"></tr></em>
      1. 首頁»HTML/CSS»被遺忘的CSS

        被遺忘的CSS

        來源:segmentfault 發布時間:2018-04-07 閱讀次數:

          平時在工作中遇到一些比較偏門的 css ,用過一兩次,但是老是記不住,于是又需要去 baidu、 google ,所以都積累起來,方便以后查看


        outline 當input選中的時候會出現一個邊框

        /*一般設置成 none*/
        textarea:focus, input:focus{
            outline: none;
        }

        contenteditable 規定元素內容是否可編輯

        <div id="example-one" contenteditable="true">
        #example-one { 
            margin-bottom: 10px; 
        }
        [contenteditable="true"] { 
            padding: 10px; outline: 2px dashed #CCC; 
        }
        [contenteditable="true"]:hover { 
            outline: 2px dashed #0090D2; 
        }

        webkit-playsinline video 都可以在頁面中播放,而不是全屏播放

        <video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>

        clearfix 清除浮動

        .clearfix {
            zoom: 1;
        }
        .clearfix:after {
             visibility: hidden;
             display: block;
             font-size: 0;
             content: " ";
             clear: both;
             height: 0;
         }

        user-select 禁止選中文本

        p {
            -webkit-user-select: none; /* Chrome, Opera, Safari */
            -moz-user-select: none; /* Firefox 2+ */
            -ms-user-select: none; /* IE 10+ */
            user-select: none; /* Standard syntax */
        }

        webkit-scrollbar 自定義瀏覽器滾動條

        /*定義滾動條寬高及背景,寬高分別對應橫豎滾動條的尺寸*/
        
        div::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            background-color: rgba(245, 245, 245, 0.47);
        }
        
        /*定義滾動條的軌道,內陰影及圓角*/
        
        div::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            border-radius: 10px;
            background-color: #f5f5f5;
        }
        
        /*定義滑塊,內陰影及圓角*/
        
        div::-webkit-scrollbar-thumb {
            /*width: 10px;*/
            height: 20px;
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: rgba(85, 85, 85, 0.25);
        }

        webkit-appearance 去除默認樣式

        input, button, textarea, select {
            *font-size: 100%;
            -webkit-appearance:none;
        }

        使用CSS transforms 或者 animations時可能會有頁面閃爍的bug

        elements {
             -webkit-backface-visibility: hidden; 
        }

        transform-style: preserve-3d 讓元素支持3D

        elements {
            -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
            -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
            transform: rotateY(60deg);
            transform-style: preserve-3d;
        }

        perspective 這個屬性定義子元素會獲得透視效果,而不是元素本身

        <div class="cube pers250">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
        </div>
        .cube {
          width: 100%;
          height: 100%;
          backface-visibility: visible;
          perspective-origin: 150% 150%;
          transform-style: preserve-3d;
          -webkit-backface-visibility: visible;
          -webkit-perspective-origin: 150% 150%;
          -webkit-transform-style: preserve-3d;
        }
        .pers250 {
          perspective: 250px;
          -webkit-perspective: 250px;
        }
        .face {
          display: block;
          position: absolute;
          width: 100px;
          height: 100px;
           border: none;
          line-height: 100px;
          font-family: sans-serif;
          font-size: 60px;
          color: white;
          text-align: center;
        }

        css實現不換行、自動換行、強制換行

        /*不換行*/
        white-space:nowrap;
        
        /*自動換行*/
        word-wrap: break-word; 
        word-break: normal; 
        
        /*強制換行*/
        word-break:break-all;

        font-smoothing 設置字體平滑,會讓字體看起來比較舒服

        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-family: "Microsoft YaHei", "微軟雅黑", 'Muli', "Helvetica", Arial, sans-serif;
        }

        ::selection 修改選中文本顏色

        ::selection {
            color: white;
            background-color: rgba(0, 0, 0, 0.8);
        }
        ::-webkit-selection {
            color: white;
            background-color: rgba(0, 0, 0, 0.8);
        }
        ::-moz-selection {
            color: white;
            background-color: rgba(0, 0, 0, 0.8);
        }
        QQ群:WEB開發者官方群(515171538),驗證消息:10000
        微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
        提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
        CSS
        網友評論(共0條評論) 正在載入評論......
        理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
        登錄會員中心
        江苏快3投注技巧