<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          CSS/CSS3常用的樣式兼容,樣式總結

          時間:?2017-10-27閱讀:?1322標簽:?兼容

          這篇文章這篇文章主要介紹了css中常用但是又難記的樣式作為總結,方便大家學習和使用。包括了‘單行縮略號‘、’css圓角兼容'、‘元素陰影’,‘border取消寬度影響’,‘css3的背景漸變’,‘css的透明’等等

          單行縮略號  

          .overhid{
              overflow: hidden;
              white-space:nowrap; 
              text-overflow:ellipsis;
          }

          css圓角兼容  

          .setradius{
              -moz-border-radius: 5px;
              -webkit-border-radius: 5px;
              border-radius: 5px;
          }

          元素陰影  

          .boxShadow{
              -moz-box-shadow: 5px,5px,1px,#000;
              -webkit-box-shadow:5px,5px,1px,#000;
              box-shadow: 5px,5px,1px,#000;
          }

          參數:box-shadow:none | [inset  x-offset y-offset blur-radius spread-radius color], [inset  x-offset y-offset blur-radius spread-radius color]   

          none:默認值,元素沒有任何陰影效果。
          inset:陰影類型,可選值。如果不設置,其默認的投影方式是外陰影;如果取其唯一值“inset”,就是給元素設置內陰影。
          x-offset:陰影水平偏移量,其值可以是正負值。如果取正值,則陰影在元素的右邊,反之取負值,陰影在元素的左邊。
          y-offset:陰影垂直偏移量,其值可以是正負值。如果取正值,則陰影在元素的底部,反之取負值,陰影在元素的頂部。
          blur-radius:陰影模糊半徑,可選參數。其值只能是正值,如果取值為“0”時,表示陰影不具有模糊效果,如果取值越大,陰影的邊緣就越模糊。

          spread-radius:陰影擴展半徑,可選參數。其值可以是正負值,如果取值為正值,則整個陰影都延展擴大,反之取值為負值,則整個陰影都縮小。
          color:陰影顏色,可選參數,如果不設定任何顏色時,瀏覽器會取默認色,但各瀏覽器默認色不一樣,特別是在Webkit內核下的瀏覽器將無色,也就是透明,建議不要省略這個參數。

          border取消寬度影響

          .noborder{/*border 0width*/
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
          }

          css3的背景漸變

          .background{
            background:-webkit-linear-gradient(top,#FFF,#cb1919);
            background:-o-linear-gradient(top,#FFF,#cb1919);
            background:-ms-linear-gradient(top,#FFF,#cb1919);
            background:-moz-linear-gradient(top,#FFF,#cb1919);
            background:linear-gradient(top,#FFF,#cb1919);
          }

          css的透明

          .transparent{
              filter:alpha(opacity=50);   
              -moz-opacity:0.5;   
              -khtml-opacity: 0.5;   
              opacity: 0.5;   
          }

          取消div選中藍色背景

          .nousel{
              -webkit-user-select: none;  /* Chrome all / Safari all */
              -moz-user-select: none;     /* Firefox all */
              -ms-user-select: none;      /* IE 10+ */
              -o-user-select: none;
              user-select: none;
          }

          //說明:1.IE6-9不支持該屬性但支持使用標簽屬性 onselectstart="return false;"2.直到Opera不支持該屬性,支持使用私有的標簽屬性 unselectable="on";

          css3設置字體

          @font-face{
              font-family: myFirstFont;
              src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */
          }
          div{
              font-family:myFirstFont;
          }


          取消移動端元素被點擊高亮顯示 

          .nohighlight{
             -webkit-tap-highlight-color: transparent;
          }

           取消移動端表單元素的默認風格

          input,textarea{
             -webkit-appearance: none;
          }

          取消表單元素的輪廓樣式

          input{
          outline:none;
          }

          textarea去掉右側滾動條,去掉右下角拖拽  

          textarea{
            overflow:hidden;
            resize:none;
          }


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/21

          談談瀏覽器的兼容性(面試題)

          H5新標簽在IE9以下的瀏覽器識別 ;ul標簽內外邊距問題ul標簽在IE6\\\\IE7中,有個默認的外邊距,但是在IE8以上及其他瀏覽器中有個默認的內邊距。解決方法:統一設置ul的內外邊距為0

          IE實現css3效果兼容

          Shadow陰影Color,設置陰影顏色。Direction,設置陰影的方向,角度也是從0°~315°取值(跟PS的投影效果非常的相似。)Strength,設置投影強度,數值越大越模糊。Gradient漸變

          vue項目中兼容ie8以上瀏覽器的配置

          首先需要在根目錄的index.html文件加入如下代碼;安裝babel-polyfill 插件;在入口文件main.js文件中引入插件;需要在webpack.base.config.js配置文件中做如下修改

          CSS瀏覽器兼容性與解決方法

          所謂的瀏覽器兼容性問題,是指不同的瀏覽器對同一段代碼有不同的解析,造成頁面顯示效果不統一的情況;而造成瀏覽器兼容問題的根本原因,是瀏覽器的內核不同導致的。認識瀏覽器內核

          vue-cli3配置IE瀏覽器兼容性

          在查詢如何兼容ie時,首先是查看vue cli官網,瀏覽器兼容性,感覺官網說的不是太明晰(小白一枚,實在不太懂),然后就直接百度了,網上方法基本類似,都是用 browserslist,babel-polyfill等

          X5內核瀏覽器,video兼容

          使用vue-video-player在移動端微信內置瀏覽器打開,點擊視頻自動全屏問題。 參考官方 API 是 H5 同層瀏覽器的原因,可通過設置video屬性來處理。

          原生js中6種常見的兼容問題以及解決方案

          1.鍵盤檢測兼容寫方法;2.阻止冒泡事件冒泡的兼容;3.鼠標箭頭事件對象的兼容;4.阻止瀏覽器默認事件兼容;5.獲取非行間樣式的兼容寫法

          前端常見的CSS兼容性問題

          雙倍浮動BUG;表單元素行高不一致;IE6(默認16px為最小)不識別較小高度的標簽(一般為10px);圖片添加超鏈接時,在IE瀏覽器中會有藍色的邊框;最小高度min-height不兼容IE6

          談談瀏覽器兼容性問題

          為什么瀏覽器會存在兼容問題?同一瀏覽器,版本越老,存在bug越多,相對于版本越新的瀏覽器,對新屬性和標簽、新特性支持越少。

          border-radius:50%,在安卓上存在兼容問題

          做移動端開發時為了做適配,通常采用rem作為單位,下面來寫一個圓角,相同的代碼,有的是正圓,有的不是,ios,pc均顯示正常

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网