首頁»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开奖结果 极速快3官网下载地址 吉林十一选五玩法 云南彩票中奖要怎样领奖 2019海南环岛赛程 福福建快三开奖结果直播 七星彩走势图综合版 湖北30选5走势图100期 海南飞鱼开奖查询 欢乐斗地主游戏开发 彩票开奖甘肃11选5开奖结果 海滨最新福彩3d预测 最新组六技巧