<dl id="3wz6h"></dl><li id="3wz6h"></li>

      1. <dl id="3wz6h"></dl>

      2. <dl id="3wz6h"><ins id="3wz6h"></ins></dl>

            <dl id="3wz6h"></dl>

            <dl id="3wz6h"><ins id="3wz6h"></ins></dl>
            1. 
              
              <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>

              <li id="3wz6h"><ins id="3wz6h"></ins></li>
              
              

            2. <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>
              首頁»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條評論
              登錄會員中心
              云南十一选往期