1. 程式人生 > >IOS中使用網頁時input去除預設樣式的兩個屬性

IOS中使用網頁時input去除預設樣式的兩個屬性

1、-webkit-appearance   

使用“-webkit-appearance: none; ”來改變按鈕在iPhone下的預設風格,其實我們可以反過來思路,使用“appearance”屬性,來改變任何元素的瀏覽器預設風格,簡單的說,你可以使用“appearance”屬性將“段落p”渲染成button的風格,也可以渲染成“輸入框”、“選擇框”等效果。

大家都知道每個瀏覽器對HTML元素渲染都不一樣,比如說“button”,在chrome和ff中,渲染出來的效果都是不盡相同的。這樣一來就有了今天這個思路,利用瀏覽器的對元素的預設渲染風格,我們可以使用“appearance”屬性對任何元素的渲染風格改變,最簡單的來說,我要把“a”連結預設顯示成“按鈕”風格,那麼我們可以使用“appearance”設定為“button”。

“appearance”功能聽起來蠻大的,不過可惜的是,目前各個瀏覽器廠商各自為政,還無法達到統一的標準,至今天也只有兩個核心的瀏覽器可以使用,其一是“webkit”,其二是“ff”的,也就是說在使用“appearances”時,需要加上各瀏覽器廠字首。

appearance使用方法:

.elmClass{
   -webkit-appearance: value;
   -moz-appearance:    value;
   appearance:         value;
}

接下來我們一起來看個簡單的例項:

<p class="lookLikeAButton">
我是一個段落P元素 </p> <p class="lookLikeAListbox">我是一個段落P元素 </p> <p class="lookLikeAListitem">我是一個段落P元素 </p> <p class="lookLikeASearchfield">我是一個段落P元素 </p> <p class="lookLikeATextarea">我是一個段落P元素 </p> <p class="lookLikeAMenulist">我是一個段落P元素</p>

接下來,使用“appearance”屬性來改變上面“P”元素的風格:

/*看起來像個按鈕,以按鈕的風格渲染*/
.lookLikeAButton{
     -webkit-appearance:button;
     -moz-appearance:button;
}
/*看起來像個清單盒子,以listbox風格渲染*/
.lookLikeAListbox{
     -webkit-appearance:listbox;
     -moz-appearance:listbox;
}
/*看起來像個清單列表,以listitem風格渲染*/
.lookLikeAListitem{
     -webkit-appearance:listitem;
     -moz-appearance:listitem;
}
/*看起來像個搜尋框,以searchfield風格渲染*/
.lookLikeASearchfield{
     -webkit-appearance:searchfield;
     -moz-appearance:searchfield;
}
/*看起來像個文字域,以textarea風格渲染*/
.lookLikeATextarea{
     -webkit-appearance:textarea;
     -moz-appearance:textarea;
}
/*看起來像個下接選單,以menulist風格渲染*/
.lookLikeAMenulist{
     -webkit-appearance:menulist;
     -moz-appearance:menulist;
}

經過“appearance”的屬性值設定後,段落P的預設風格就被改變了,如圖所示:

當然上面的屬性只是“appearance”中的一部分,我搜集了一下webkit和Mozilla下的appearance給大家參考:

Webkit下的appearance屬性值

checkbox
radio
push-button
square-button
button
button-bevel
listbox
listitem
menulist
menulist-button
menulist-text
menulist-textfield
scrollbarbutton-up
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
caret
searchfield
searchfield-decoration
searchfield-results-decoration
searchfield-results-button
searchfield-cancel-button
textfield
textarea

Mozilla下的appearance屬性值

none
button
checkbox
checkbox-container
checkbox-small
dialog
listbox
menuitem
menulist
menulist-button
menulist-textfield
menupopup
progressbar
radio
radio-container
radio-small
resizer
scrollbar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
separator
statusbar
tab
tab-left-edge Obsolete
tabpanels
textfield
textfield-multiline
toolbar
toolbarbutton
toolbox
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communications-toolbox
-moz-win-glass
-moz-win-media-toolbox
tooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
treeview
window

大家要是感興趣的話可以看看下面的相關介紹:

最後在提醒大家一回,目前在IE系列和Opera瀏覽器上不支援“appearance”,而且Safari也只有3.0版本以上支援,而在Chrome和Firefox以及移動設定瀏覽器上得到較好的支援。如果大家對此感興趣,自己可以私下一個下個嘗試上面的屬性值,給大家帶來何種效果。

2、-webkit-box-shadow

本文我們擱下IE不談,只談談box-shadow的具體使用方法

語法:

E {box-shadow: <length> <length> <length>?<length>?||<color>}
也就是:
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
換句說:
物件選擇器 {box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色}

box-shadow和text-shadow一樣可以使用一個或多個投影,如果使用多個投影時必須需要用逗號“,”分開。

取值:

box-shadow屬性至多有6個引數設定,他們分別取值:

陰影型別:此引數是一個可選值,如果不設值,其預設的投影方式是外陰影;如果取其唯一值“inset”,就是將外陰影變成內陰影,也就是說設定陰影型別為“inset”時,其投影就是內陰影;

X-offset:是指陰影水平偏移量其值可以是正負值可以取正負值,如果值為正值,則陰影在物件的右邊,反之其值為負值時,陰影在物件的左邊;

Y-offset:是指陰影的垂直偏移量,其值也可以是正負值,如果為正值,陰影在物件的底部,反之其值為負值時,陰影在物件的頂部;

陰影模糊半徑:此引數是可選,,但其值只能是為正值,如果其值為0時,表示陰影不具有模糊效果,其值越大陰影的邊緣就越模糊;

陰影擴充套件半徑:此引數可選,其值可以是正負值,如果值為正,則整個陰影都延展擴大,反之值為負值是,則縮小

陰影顏色:此引數可選,如果不設定任何顏色時,瀏覽器會取預設色,但各瀏覽器預設色不一樣,特別是在webkit核心下的safari和chrome瀏覽器將無色,也就是透明,建議不要省略此引數。

瀏覽器的相容:

我們這裡還涉及到一個各瀏覽器字首的問題,比如說Mozilla核心的-moz,webkit核心的-webkit。經測試在最新版的Firefox和Google Chrome瀏覽器都無需加上字首,但在safari中還是需要前緣的,為了能相容支援的各大瀏覽器,我們在書寫box-shadow的格式應該這樣

//Firefox4.0-
-moz-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色;

box-shadow的特徵:

較之ps製作出來的圖片相比,CSS3的box-shadow可以通過改變其引數得到不同的效果,如:改變陰影偏移量的設定,我們可以使用陰影只在物件的上下左右的任一邊出現,也可以讓其出現在其中的某幾個邊上;其二可以隨時調節陰影大小,邊緣模糊度,陰影顏色,其三可以隨時更改為內陰影,另外還可以設定多個陰影效果

我們先來看一個簡單的例項:

.demo1 {
  -webkit-box-shadow: 3px 3px 3px;
  -moz-box-shadow: 3px 3px 3px;
  box-shadow: 3px 3px 3px;
}

Firefox/Opera下效果   Safari/Chrome下效果

回到上面那個例項,其實在webkit核心的瀏覽器Safari、Google Chrome裡不會有任何陰影效果,雖然W3C標準裡說顏色是可選擇的,但是在沒有給出顏色的時候 ,safari/chrome和firefox表現不同,在webkit核心的瀏覽器下陰影表現為透明色而mozilla和oprea下表現為黑色。基於這樣的原因,大家在使用box-shadow時不要忘了加上陰影顏色的值。

根據上面的現像,我們來看一個box-shadow有關陰影是否會被計算為內容的例項。

<div class="outer">
  <div class="inter"> </div>
</div>   

我們把外面div設定為100px*100px,裡面div設定為60px*60px,並在裡面的div上加上一個向下向右偏移50px的綠色陰影,我們看看多出來的陰影會怎麼樣?

  .outer {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
  }
  .inter {
    width: 60px;
    height: 60px;
    margin: 10px auto;
    background: #f69;
    -webkit-box-shadow: 50px 50px green;
    -moz-box-shadow: 50px 50px green;
    box-shadow: 50px 50px green;
  }
 

從各大瀏覽中的效果我們可以看出,陰影多出來的陰影會撐破容器跑出來。標準裡有一張圖,描述了box-shadow的工作方式,這張圖直觀告訴我們如何使用box-shadow

這張圖可以告訴我們很多資訊,比如說borer-radius圓角,陰影擴充套件、陰影模糊以及padding是如何影響物件陰影的:非零值的border-radius將會以相同的作用影響陰影的外形,但border-image不會影響物件陰影的任何外形;物件陰影同box模型的層次一樣,外陰影會在物件背景之下,內陰影會在邊框之下背景之上。所以整個層級就是:邊框>內陰影>背景圖片>背景顏色>外陰影。因為大家都知道,我們的背景圖片是在背景顏色之上的。

IE濾鏡方法:

在前面我們講過,IE9以下是不支援CSS3的box-shadow的,但為了處理這個相容問題,我們可以在IE下使用IE的shadow陰影濾鏡來實現

   filter: progid:DXImageTransform.Microsoft.Shadow(color=’顏色值’, Direction=陰影角度(數值), Strength=陰影半徑(數值));

注意:該濾鏡必須配合background屬性一起使用,否則該濾鏡失效。除了使用濾鏡的方法外,我們還有一種方法可以實現IE下的效果。那就是使用jQuery的外掛jquery.boxshadow.js。那麼具體如何使用呢?其實很簡單,你先下載這個jquery.boxshadow.js外掛到你的專案中,接著把jquery版本庫和jquery.boxshadow.js載入到頁面上,如

   <script type="text/javascript" src="../js/jquery.min.js"></script>
   <script type="text/javascript" src="../js/jquery.boxshadow.js"></script>

然後你可以建立一個單獨的js檔案來處理,或者直接在頁面的<head></head>裡欠入一個<script> </script>,我們這裡就只例出一個直接在head插入的解決辦法:

  $(document).ready(function(){
    if($.browser.msie) {
      $('.demo1').boxShadow(0,0,5,"#888"); //demo1元素使用了box-shadow
      $('.demo2').boxShadow(-10,-10,5,"#f36"); //demo2元素使用了box-shadow
    }
  });

上面我們瞭解了CSS3的box-shadow相關基礎知識,那麼下面我們通過一些例項來鞏固一下box-shadow的具體用法:

如果沒有進行特殊說明,我們這裡的例項所用的HTML程式碼都如下,只是改變第二個class名稱,如demo1 demo2等:

  <div class="demo demo2></div>

基本的CSS樣式

  .demo {
    width: 100px;
    height: 50px;    
    background: #f69;
  }

提醒大家:為了節約時間,下面的css程式碼中我只寫了一個box-shadow,但是大家在實際應用中一定要記得把:-webkit-box-shadow和-moz-box-shadow加上去,不然在safari和chrome瀏覽器下是會沒有任何效果的,這個我們在前面提過,此處不詳說。

效果一:單邊效果

 .dome2 {
   box-shadow: -2px 0 0 green, //左邊陰影
   0 -2px 0 blue, //頂部陰影
   0 2px 0 red, //底部陰影
   2px 0 0 yellow; //右邊陰影
 }

上例中,我們分別對物件的四個邊進行了box-shadow的設定,只不過我們使用了多層次的box-shadow應用,如果只需要在物件某一邊應用陰影時,我們可以刪除不使用陰影的設定。給物件四邊設計陰影,我們是通過改變x-offset和y-offset的正負值來實現,其中x-offset為負值時,生成左邊陰影,為正值時生成右邊陰影,y-offset為正值是生成底部陰影,為負值時生成頂部陰影。並且把模糊半徑設定為0,如果不設定為0的話那麼其他三邊也將會有陰影,並且此處還涉及到一個多陰影的順序問題。當給同一個元素使用多個陰影屬性時,需要注意它的順序,最先寫的陰影將顯示在最頂層,如我們將上面的例項變一下,給其加上模糊值,將更能看出效果:

  .demo3 {
    box-shadow: -2px 0 5px green,0 -2px 5px blue,0 2px 5px red,2px 0 5px yellow;
  }

這樣我們上例中:左邊的放在了第一,其green陰影色在頂邊的blue上,而頂邊的blue在又在右邊的yellow上,右這的yellow卻在底邊的red上。所以應用多次陰影的寫法一定要注意其順序問題,特別的當陰影的模糊值不一樣的情況之下,另外有些網站介紹說可以寫成下面的形式,但我經過多個瀏覽器測試,這種寫法是無效的,

  .demo4 {
    /*這種寫法是錯誤的(,網上有介紹說可以這樣書寫,但我測試多次未見效果,所以本人提倡不要這樣書次,以免造成不必要的錯誤)*/
    box-shadow: -2px 0 0 green,box-shadow: 0 -2px 0 blue,box-shadow: 0 2px 0 red,box-shadow: 2px 0 0 yellow;
  }

從上圖的效果中也再一次證明了上面的寫法是不正確的,希望大家在實際應用中時一定要注意多層次陰影的書寫方法。同時也提醒大家在網上看相關資料時一定不能盡信,最好是能自己抽空驗正一下。

在使用多層次的陰影時還需注意一個細節問題,如果前面的陰影模糊值小於後面的陰影模糊值,那麼前面的顯示在後面之上,如果前面陰影的模糊值大於後面的陰影模糊值,那麼前面的陰影將遮住後面的陰影效果。如下面例子:

 /*第一個陰影模糊半徑值小於第二陰影模糊半徑*/
 .demo5 {
   box-shadow: 0 0 5px red,0 0 15px blue;
 }
  
 /第一個陰影模糊半徑大於第二陰影模糊半徑*/
 .demo6 {
   box-shadow: 0 0 15px red, 0 0 5px blue;
 }

例項效果再次證明:左圖中我們可以看見紅色陰影在蘭色陰影之上並沒有遮蓋藍色陰影,因為我們紅色的陰影模糊值只有5px,比藍色的15px模糊值要小;而右圖中我們只能看到紅色的陰影,那是因為我們第一個紅色陰影的模糊半徑大於第二個蘭色的模糊半徑,所以紅色的陰影把藍色的陰影遮蓋住了。這一點大家可記住了。

效果二:四邊具有相同的陰影效果(只設置陰影模糊半徑和陰影顏色)

  .demo7 {
    box-shadow: 0 0 5px rgb(250,0,0);
  }

我們在這裡設定的是HEX值,我們也可以應用css3的rgba值給box-shadow的陰影顏色上,這樣的好處是,box-shadow陰影色多了一個alpha透明值 ,如下面的例項:

 .demo8 { 
   box-shadow: 0 0 5px rgba(250,0,0,0.5);
 }

對比上面兩個例子,前一個例子我們沒有應用透明值,而後面一個例子我們應用了0.5的透明值,相比之下後面的陰影是不是更淺。當然在實踐應用中您可以根據自己的需求進行設定。

效果三:四邊具有相同的陰影(只設置陰影擴充套件半徑和陰影顏色)

 .demo9 {
  box-shadow: 0 0 0 1px red;
 }

從效果中大家想想這種效果是不是跟我們在元素中的boder: 1px solid red;屬性產生的效果很相似的呀。對的,box-shadow不單可以製作出陰影的效果,我們還可以利用其擴充套件半徑這個值,來給物件製作出類似於邊框的樣式。下面我們來看一個對比的例項:

  /*邊框效果*/
  .demo10 {
    border: 1px solid red;
  }
  /*陰影效果*/
  .demo11 {
    box-shadow: 0 0 0 1px red;
  }

實際上利用box-shadow來製作邊框,只能說看上去像邊框,但實質其並非邊框,他和border還是有本質上的區別。從上面的效果圖中我們明顯的可以看出左邊的box要比右邊的box低那麼1px的,這樣一來隨著其擴充套件半徑值越大,兩者之間的相差就更大,如:

 .demo12 {
   border: 20px solid red;
 }
	
 .demo13 {
   box-shadow: 0 0 0 20px red;
 }

我們接著來看demo12和demo13兩個demo在firebug下的layout圖:

結合上圖兩者在firebug下的layout圖,更證實了我們前面所講的陰影不會影響頁面的任何佈局:demo12的邊框被計算了寬度,但demo13的陰影瀏覽器卻忽略不計,所以借住這個特點,我們陰影所模擬的邊框理可以自由的使用,但必須要注意其層級關係。

前面我們主要舉例說明了如何利用box-shadow給物件單邊加上陰影效果多邊應用陰影效果四邊同時應用相同的陰影效果以及如何應用陰影模仿物件邊框效果等,這些都是我們box-shadow常用的一些陰影效果,下面我們在來例舉幾個特殊的例項:內陰影insetbody設定陰影投影drop shadow

內陰影inset效果:

  .demo14 {
    box-shadow: inset 0 0 10px red;
  }

上圖中我們實現了div上新增內陰影的效果,我們這裡要提醒一點的是,img標籤上直接應用box-shadow的inset是沒有任何效果的,為了證實這一點,我們一起來看下面的一個例項:

   <img src="/images/box-shadow-img.png" alt="box shadow img" />
 img {
   box-shadow: inset 0 0 10px red;
 }      

上面的效果圖再次證實了我們前面所說的,直接在img元素上使用inset是沒有任何效果的,那麼我們現在來針對這個bug做一次修改,我們把img放到一個div中,然後不直接在img上運用box-shadow屬性,而是在img的父元素div上運用box-shadow,接著我們在給img進行相對定位,並讓其在父元素下一層,如:

   <div class="img-wrap"><img src="/images/box-shadow-img.png" alt="box shadow img" /></div>

我們來看其主要的樣式:

  .img-wrap {
     -webkit-box-shadow: inset 0 0 10px red;
     -moz-box-shadow: inset 0 0 10px red;
     box-shadow: inset 0 0 10px red;
     display: inline-block;
  }
  .img-wrap img {
    position: relative;
    z-index: -1;
}

根據上面例項思路,我們換過一種實現方法,這種方法我們是在img父元素上應用一上偽元素“:before”來實現:

   <div class="shadow"><img src="/images/box-shadow-img.png" alt="box shadow img" /></div>
  .shadow {
    position: relative;
    display: inline-block;
    *display: inline;
  }
  .shadow::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    -moz-box-shadow:inset 0 0 5px 1px red;
    -webkit-box-shadow: inset 0 0 5px 1px red;
    
            
           

相關推薦

IOS使用網頁input去除預設樣式屬性

1、-webkit-appearance    使用“-webkit-appearance: none; ”來改變按鈕在iPhone下的預設風格,其實我們可以反過來思路,使用“appearance”屬性,來改變任何元素的瀏覽器預設風格,簡單的說,你可以使用“appeara

iOS開發,調整view層級位置的屬性

控制元件的層級關係和你加入到父檢視的順序有關,也就是先addsubview至父檢視的,層級越低,會被後加入的遮蓋。 可以通過以下函式改變子檢視的層級: 1.Objective-C版本: 將UIView顯示在最前面: - (void)bringSubvi

React 專案修改 Ant Design 的預設樣式(Input Checkbox 等等

修改樣式更符合專案的需求特別是在 Input 和 Checkbox 等等一系列 試過很的方式都有問題, 比如直接在行內新增樣式會無法傳遞到特定的層級 最好的辦法是新增 id 可行 渲染部分程式碼 <Card title = "修改預設樣式">

iOS H5的input輸入框focus()無法自動拉起鍵盤(解決方法)

ios 不一定 中修改 解決 input rdd clas fig oar ios的hybird APP 無法使用focus()獲取焦點和鍵盤的問題。 解決方案 原來,在App的配置文件(config.xml),裏面默認會有一句 1 <preference name

檔案上傳input file預設樣式修改

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>檔案上傳按鈕修改樣式</title> <style> .file-box{ display:

select去除預設樣式

 效果如下: <style> .box { border: 1px solid #bbb; border-radius: 1px; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); width: 300px;

改變input預設樣式

1. 聚焦時不出現藍色邊框 outline:none;  2.修改 input 預設的placeholder input::-webkit-input-placeholder {    font-size: 0.4rem;&nbs

css-去除預設樣式

1.去除select預設的下三角 select {-webkit-appearance: none;border-radius: 0;} 2.checkbox 去除預設樣式後,選中狀態勾選樣式無法出現,需要設定 input {-webkit-appearance: none

關於a標籤點選去除預設樣式

我們在平時a標籤裡面巢狀一些字型圖片,這是很常見的。但是我們並不需要點選時候a標籤裡面的字型變色。這個小知識點,很簡單:css樣式: a{ text-decoration:none; color:

自定義RadioButton樣式去除預設樣式位置

做專案的遇到要自定義RadioButton的樣式,在網上搜索了很多例子都沒有完美解決,當android:button="@null"的是時候但它的位置還在,空出了很大一塊,橫向排列的時候不是很美觀。試了很多辦法終於解決了這個小問題就是把背景也設為"@null"  這樣:an

checkbox選中如何改變預設樣式

剛剛釋出了人生中的第一篇部落格,然後期待的點開,回味一下,不看不知道,一看嚇一跳,我的天,前面都是些什麼東西,還是說所有的第一篇都是那樣的,如果您不小心點開了我。。。的第一篇部落格,請直接跳到最下面,那幾行才是我的內容,這是第二篇,希望不要在那什麼什麼的。 好了,我的廢話太多了,說點有料

去除預設樣式

1,去除button input 等一些預設樣式-moz-appearance:none;-ms-progress-appearance:none;-webkit-appearance:none;2,去除移動端a標籤點選後的樣式a{outline:none;-webkit-t

textarea 去除預設樣式

from:大前端 看程式碼: 取消chrome下input和textarea的聚焦邊框: input,button,select,textarea{outline:none} 取消chrome下textarea可拖動放大: textarea{resize:none} 最後,寫在一起,重置input和

HTML5 input改變預設樣式

最近使用了html5中的input,感覺很牛逼,有很多型別和屬性方便小夥伴去做各種好看的表單樣式。下面我們先來看看HTML5預設的input的一些樣式(本文主要討論的是驗證樣式): 預設驗證樣式: 程式碼: &

Android如何修改SeekBar的預設樣式

SeekBar的預設樣式如下: 想要修改成:(這種iphone的風格) step1: 書寫 seekbar_style.xml  <?xml version="1.0" encoding="UTF-8"?>              <layer

TreeSet方法之一 當向TreeSet新增Person物件 續 當有多屬性的自然排序

package andycpp; public class Person implements Comparable { private String name; private Integer age; //get set 方法 public String ge

mysql和mariadb字段拼接類型有或多字段或者一個字段和一個固定字符串拼接

str1 from 連接 字符串連接 一個 cat str 拼接 str2 MySQL中concat函數 CONCAT(str1,str2,…) 1 .兩個或多個字段連接 例:字段 a,b 表 tb1 語句: select conca

java 識別字符串字節數(中文占字節,英文占一個)

else if gpo pub div 字節 str length 英文 兩個 public static int byteNum(String str) { int m = 0; char arr[] =

【C++】判斷元素是否在vector,對vector去重,vector求交集、並集

bool iostream space col 求交集 uniq AI void print #include <iostream> #include <vector> #include <algorithm> //sort函數、交並補

vs的程序有debug和release版本的區別

不同的 上進 BE 使用 的區別 debug 存在 通過 最優 vs中的程序有debug和release兩個版本,Debug通常稱為調試版本,通過一系列編譯選項的配合,編譯的結果通常包含調試信息,而且不做任何優化,以為開發 人員提供強大的應用程序調試能力。而Release通