整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS3 - 新單位vw、vh、vmin、vmax使用詳解(附樣例)

          pxem 這樣的長度單位大家肯定都很熟悉,前者為絕對單位,后者為相對單位。CSS3 又引入了新單位:vwvhvminvmax。下面對它們做個詳細介紹。

          一、基本說明

          1,vw、vh、vmin、vmax 的含義

          (1)vwvhvminvmax 是一種視窗單位,也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗(Viewport)大小來決定的,單位 1,代表類似于 1%

          視窗(Viewport)是你的瀏覽器實際顯示內容的區域—,換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。


          (2)具體描述如下:

          • vw:視窗寬度的百分比(1vw 代表視窗的寬度為 1%
          • vh:視窗高度的百分比
          • vmin:當前 vwvh 中較小的一個值
          • vmax:當前 vwvh 中較大的一個值


          2,vw、vh 與 % 百分比的區別

          (1)% 是相對于父元素的大小設定的比率,vwvh 是視窗大小決定的。

          (2)vwvh 優勢在于能夠直接獲取高度,而用 % 在沒有設置 body 高度的情況下,是無法正確獲得可視區域的高度的,所以這是挺不錯的優勢。


          3,vmin、vmax 用處

          做移動頁面開發時,如果使用 vwwh 設置字體大小(比如 5vw),在豎屏和橫屏狀態下顯示的字體大小是不一樣的。

          由于 vmin vmax 是當前較小的 vw vh 和當前較大的 vw vh。這里就可以用到 vmin vmax。使得文字大小在橫豎屏下保持一致。


          4,瀏覽器兼容性

          (1)桌面 PC

          • Chrome:自 26 版起就完美支持(2013年2月)
          • Firefox:自 19 版起就完美支持(2013年1月)
          • Safari:自 6.1 版起就完美支持(2013年10月)
          • Opera:自 15 版起就完美支持(2013年7月)
          • IE:自 IE10 起(包括 Edge)到現在還只是部分支持(不支持 vmax,同時 vm 代替 vmin


          (2)移動設備

          • Android:自 4.4 版起就完美支持(2013年12月)
          • iOS:自 iOS8 版起就完美支持(2014年9月)

          二、一個簡單的樣例

          1,頁面代碼

          視窗(Viewport)單位除了可以用來設置元素的寬高尺寸,也可以在文本中使用。下面使用 vw 設置字體大小來實現響應式文字。

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <title>hangge.com</title>
              <style>
                html, body, div, span, h1, h2, h3 {
                  margin: 0;
                  padding: 0;
                  border: 0;
                }
           
                .demo {
                 width: 100vw;//重點看
                 font-size: 5vw;//重點看 
                 margin: 0 auto;
                 background-color: #50688B;
                 color: #FFF;
                }
           
                .demo2 {
                 width: 80vw;//重點看
                 font-size: 5vw;//重點看
                 margin: 0 auto;
                 background-color: #ff6a00;
                }
           
                .demo3 {
                 width: 50vw;//重點看
                 height: 50vh;//重點看
                 font-size: 1vw;//重點看
                 margin: 0 auto;
                 background-color: #ff006e;
                 color: #FFF;
                }
              </style>
            </head>
            <body>
                <div class="demo">
                    <h1>寬度100%, 字體5%</h1>
                </div>
                <div class="demo2">
                    <h2>寬度80%, 字體5%</h2>
                </div>
                <div class="demo3">
                    <h3>寬度50%, 高度50%, 字體1%</h3>
                </div>
            </body>
          </html>


          2,效果圖

          三、實現完整覆蓋的遮罩層

          有時為了突出彈出框,或者避免頁面元素被點擊。我們需要一個覆蓋整個可視區域的半透明遮罩,這個使用 vwvh 就可以很輕易地實現。

          1,樣例代碼

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <title>hangge.com</title>
              <style>
                html, body, div, span, button {
                  margin: 0;
                  padding: 0;
                  border: 0;
                }
           
                button {
                  width: 120px;
                  height: 30px;
                  color: #FFFFFF;
                  font-family: "微軟雅黑";
                  font-size: 14px;
                  background: #28B995;
                }
           
                #mask {
                  width: 100vw;//重點代碼
                  height: 100vh;//重點代碼
                  position: fixed;//重點代碼
                  top: 0;//重點代碼
                  left: 0;//重點代碼
                  background: #000000;
                  opacity: 0.5;
                  display: none;
                }
              </style>
            </head>
            <body>
                <button onclick="document.getElementById('mask').style.display='inline'">點擊顯示遮罩</button>
                <div id="mask" onclick="document.getElementById('mask').style.display='none'"/></div>
            </body>
          </html>

          2,效果圖


          四、實現居中顯示的彈出框

          1,彈出框大小隨內容自適應

          (1)樣例效果圖

          • 點擊彈出按鈕后,會顯示一個在整個屏幕上居中顯示的彈出框。
          • 彈出框的大小根據內容的大小自適應(logo 圖片),同時彈出框后面還有個覆蓋整個屏幕的半透明遮罩層。
          • 點擊關閉按鈕后,則隱藏彈出框。



          (2)樣例代碼

          遮罩層使用 vwvh 實現全屏覆蓋。彈出框添加到遮罩層中并居中。

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <title>hangge.com</title>
              <script type="text/javascript" src="js/jquery.js"></script>
              <style>
                html, body, div, span, button {
                  margin: 0;
                  padding: 0;
                  border: 0;
                }
           
                button {
                  width: 120px;
                  height: 30px;
                  color: #FFFFFF;
                  font-family: "微軟雅黑";
                  font-size: 14px;
                  background: #28B995;
                }
           
          //重點代碼
                .dialog-container {
                  display: none;
                  width: 100vw;
                  height: 100vh;
                  background-color: rgba(0,0,0,.35);
                  text-align: center;
                  position: fixed;
                  top: 0;
                  left: 0;
                  z-index: 10;
                }//重點代碼
           //重點代碼
                .dialog-container:after {
                  display: inline-block;
                  content: '';
                  width: 0;
                  height: 100%;
                  vertical-align: middle;
                }//重點代碼
           //重點代碼
                .dialog-box {
                  display: inline-block;
                  border: 1px solid #ccc;
                  text-align: left;
                  vertical-align: middle;
                  position: relative;
                }//重點代碼
           
                .dialog-title {
                  line-height: 28px;
                  padding-left: 5px;
                  padding-right: 5px;
                  border-bottom: 1px solid #ccc;
                  background-color: #eee;
                  font-size: 12px;
                  text-align: left;
                }
           
                .dialog-close {
                  position: absolute;
                  top: 5px;
                  right: 5px;
                  font-size: 12px;
                }
           
                .dialog-body {
                  background-color: #fff;
                }
              </style>
            </head>
            <body>
                <button onclick="$('#dialogContainer').show();">點擊顯示彈出框</button>
                <div id="dialogContainer" class="dialog-container">
                    <div class="dialog-box">
                        <div class="dialog-title">居中彈出框</div>
                        <a onclick="$('#dialogContainer').hide();" class="dialog-close">關閉</a>
                        <div class="dialog-body">
                          <img src="logo.png" class="demo-image" />
                        </div>
                    </div>
                </div>
            </body>
          </html>
          
          

          2,彈出框大小隨視窗大小改變

          (1)樣例效果圖

          • 點擊彈出按鈕后,會顯示一個在整個屏幕上居中顯示的彈出框。
          • 彈出框的大小不再由內容的大小決定,而是隨視窗大小改變(寬高均為屏幕可視區域的 80%)。
          • 點擊關閉按鈕后,則隱藏彈出框。



          (2)樣例代碼

          遮罩層使用 vwvh 實現全屏覆蓋。而彈出框的尺寸位置同樣使用 vwvh 設置。

          
          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <title>hangge.com</title>
              <script type="text/javascript" src="js/jquery.js"></script>
              <style>
                html, body, div, span, button {
                  margin: 0;
                  padding: 0;
                  border: 0;
                }
           
                button {
                  width: 120px;
                  height: 30px;
                  color: #FFFFFF;
                  font-family: "微軟雅黑";
                  font-size: 14px;
                  background: #28B995;
                }
           //重點代碼
                .dialog-container {
                  display: none;
                  width: 100vw;
                  height: 100vh;
                  background-color: rgba(0,0,0,.35);
                  text-align: center;
                  position: fixed;
                  top: 0;
                  left: 0;
                  z-index: 10;
                }
           //重點代碼
                .dialog-box {
                  top:10vh;
                  left:10vw;
                  width: 80vw;
                  height: 80vh;
                  text-align: left;
                  position: absolute;
                  border: 1px solid #ccc;
                  display: flex;
                  flex-direction: column;
                }
           
                .dialog-title {
                  line-height: 28px;
                  padding-left: 5px;
                  padding-right: 5px;
                  border-bottom: 1px solid #ccc;
                  background-color: #eee;
                  font-size: 12px;
                  text-align: left;
                }
           
                .dialog-close {
                  position: absolute;
                  top: 5px;
                  right: 5px;
                  font-size: 12px;
                }
           
                .dialog-body {
                  background-color: #fff;
                  flex:1;
                  overflow: auto;
                }
              </style>
            </head>
            <body>
                <button onclick="$('#dialogContainer').show();">點擊顯示彈出框</button>
                <div id="dialogContainer" class="dialog-container">
                    <div class="dialog-box">
                        <div class="dialog-title">居中彈出框</div>
                        <a onclick="$('#dialogContainer').hide();" class="dialog-close">關閉</a>
                        <div class="dialog-body">
                          <img src="logo.png" class="demo-image" />
                        </div>
                    </div>
                </div>
            </body>
          </html>


          五、顯示大圖時限制其最大尺寸

          我們還可以通過視圖單位來限制一些元素的最大寬度或高度,避尺寸過大而超出屏幕。


          1,效果圖

          (1)點擊按鈕,在屏幕中央顯示原始圖片的大圖。

          (2)如果圖片原始寬高均不超過屏幕寬高的 90%,則顯示圖片的默認大小。

          (3)如果圖片原始寬高均超過屏幕寬高的 90%,則限制為屏幕的 90%,使其能夠完全顯示。


          2,樣例代碼

          
          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <title>hangge.com</title>
              <script type="text/javascript" src="js/jquery.js"></script>
              <style>
                html, body, div, span, button {
                  margin: 0;
                  padding: 0;
                  border: 0;
                }
           
                button {
                  width: 120px;
                  height: 30px;
                  color: #FFFFFF;
                  font-family: "微軟雅黑";
                  font-size: 14px;
                  background: #28B995;
                }
           
                .dialog-container {
                  display: none;
                  width: 100vw;
                  height: 100vh;
                  background-color: rgba(0,0,0,.35);
                  text-align: center;
                  position: fixed;
                  top: 0;
                  left: 0;
                  z-index: 10;
                }
           
                .dialog-container:after {
                  display: inline-block;
                  content: '';
                  width: 0;
                  height: 100%;
                  vertical-align: middle;
                }
           
                .dialog-box {
                  display: inline-block;
                  text-align: left;
                  vertical-align: middle;
                  position: relative;
                }
           
                .demo-image {//重點代碼
                  max-width: 90vw;
                  max-height: 90vh;
                }
              </style>
            </head>
            <body>
                <button onclick="$('#dialogContainer').show();">點擊顯示大圖</button>
                <div id="dialogContainer" class="dialog-container" onclick="$('#dialogContainer').hide();">
                    <div class="dialog-box">
                        <img src="image.jpg" class="demo-image" />
                    </div>
                </div>
            </body>
          </html>


          六、實現 Word 文檔頁面效果

          1,效果圖

          (1)使用 vh 單位,我們可把 web 頁面做得像 Office 文檔那樣,一屏正好一頁。改變瀏覽器窗口尺寸,每頁的大小也會隨之變化。

          (2)拖動滾動條,我們可以一直往下看到最后一頁。


          2,樣例代碼

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <title>hangge.com</title>
              <script type="text/javascript" src="js/jquery.js"></script>
              <style>
                html, body, div, span, button {
                  margin: 0;
                  padding: 0;
                  border: 0;
                }
           
                body {
                  background-color: #789BC9;
                }
           
                page {
                  display: block;
                  height: 98vh;
                  width: 69.3vh;
                  margin: 1vh auto;
                  padding: 12vh;
                  border: 1px solid #646464;
                  box-shadow: 0 0 15px rgba(0,0,0,.75);
                  box-sizing: border-box;
                  background-color: white;
                  position: relative;
                }
           
                page:after {
                  content: attr(data-page);
                  color: graytext;
                  font-size: 12px;
                  text-align: center;
                  bottom: 4vh;
                  position: absolute;
                  left: 10vh;
                  right: 10vh;
                }
           
                a {
                  color: #34538b;
                  font-size: 14px;
                }
              </style>
              <script type="text/javascript">
                $(document).ready(function(){
                  var lenPage = $("page").length;
                  //自動添加每頁底部的頁碼
                  $("page").each(function(i){
                    $(this).attr("data-page", "第 "+ (i+1) +" 頁,共 "+ lenPage +" 頁");
                  });
                });
              </script>
            </head>
            <body>
              <page><a href="http://hangge.com">歡迎訪問 hangge.com</a></page>
              <page></page>
              <page></page>
            </body>
          </html>


          原文出自:www.hangge.com 轉載請保留原文鏈接:https://www.hangge.com/blog/cache/detail_1715.html

          果圖:

          • 所有代碼

          秘CSS3:打造視覺盛宴——深度解析漸變、陰影與遮罩技術

          隨著Web技術的不斷演進,CSS3以其強大的視覺表現力,賦予網頁設計無限可能。本文將深入剖析CSS3中的三大視覺魔法工具——漸變、陰影與遮罩技術,通過詳盡的理論講解和豐富的實例演示,助您掌握這些技巧,打造出令人眼前一亮的網頁視覺盛宴。

          一、魅力漸變:色彩的藝術流動

          1. 線性漸變:平滑過渡,簡約而不簡單

          css
          background: linear-gradient(to right, #ff6b6b, #ff9595);
          

          上述代碼創建了一個從左至右,由#ff6b6b漸變到#ff9595的線性漸變背景。您可以調整方向(如`to bottom`、`45deg`等)、添加更多顏色停止點來豐富漸變效果。

          2. 徑向漸變:聚焦視覺中心,營造立體感

          css
          background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);
          

          此例中,我們創建了一個以元素中心為圓心,從#f7f7f7漸變到#dcdcdc的圓形徑向漸變背景。通過調整形狀(如`ellipse`)、大小(如`closest-side`)和位置(如`top left`),可以靈活定制徑向漸變樣式。

          二、立體陰影:賦予元素生命與空間感

          1. 盒子陰影(Box Shadow):輕松實現三維效果

          css
          box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
          

          上述代碼為元素添加了一個向右下偏移2px、模糊半徑為8px、顏色為rgba(0, 0, 0, 0.3)的陰影。理解盒陰影的基本參數(水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色)并靈活運用,即可創造出豐富的陰影效果。

          2. 文本陰影(Text Shadow):讓文字躍然紙上

          css
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.?), -1px -1px 2px rgba(255, 255, 255, 0.5);
          

          此處為文本設置了兩個陰影:一個向右下偏移、顏色較深的陰影,以及一個向左上偏移、顏色較淺的陰影,形成微妙的浮雕效果。通過疊加多個陰影、調整參數,您可以創作出各種獨特的文本樣式。

          三、神奇遮罩:掌控元素可見度與透明度

          1. CSS Mask:精細裁剪,展現獨特視界

          css
          mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);
          

          該代碼為元素應用了一個從左至右的線性漸變遮罩,使得元素左側和右側各有一半區域透明。您還可以使用`mask-mode`、`mask-repeat`、`mask-position`等屬性進一步調整遮罩行為。

          2. CSS Clip Path:創意裁剪,打破常規布局

          css
          clip-path: polygon(0 0, 100% 0, .png);
          

          上述代碼使用多邊形裁剪路徑,將元素頂部裁剪成尖角形狀。您還可以使用橢圓、圓形、內切/外切矩形等多種路徑類型,甚至借助SVG路徑實現更為復雜的裁剪效果。

          四、實戰案例:融合三大技術,打造視覺盛宴

          案例一:動態漸變按鈕

          css
          /* 定義CSS變量 */
          :root {
            --start-color: #ff6b6b;
            --end-color: #ff9595;
          }
          
          .button {
            background: linear-gradient(to right, var(--start-color), var(--end-color));
            transition: background 0.3s ease-in-out;
          }
          
          .button:hover,
          .button:focus {
            --start-color: #ff9595;
            --end-color: #ff6b6b;
          }
          

          利用CSS變量、偽類和動畫,創建一個點擊時背景漸變顏色動態變化的按鈕:

          案例二:懸浮卡片與陰影交互

          css
          .card {
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
          }
          
          .card:hover {
            box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
          }
          

          結合盒子陰影與:hover偽類,實現鼠標懸停時卡片陰影增強的交互效果:

          案例三:遮罩疊加文字特效

          css
          .image-overlay {
            background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
            background-blend-mode: multiply;
            mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
          }
          

          利用遮罩與多重背景,創造出文字在圖片上淡入淡出的特效:

          結語

          CSS3的漸變、陰影與遮罩技術,如同網頁設計的調色板、光影魔術師和剪刀手,賦予網頁視覺表現無盡的可能性。通過深入理解并熟練運用這些技術,您將能打造出既美觀又富有創意的網頁界面,為用戶帶來極致的視覺體驗。持續探索、實踐與創新,您的每一個作品都將成為Web世界中的一道獨特風景。


          主站蜘蛛池模板: 国产精品美女一区二区三区| 亚洲AV无码一区东京热| 一区二区手机视频| 无码少妇一区二区三区浪潮AV | 大香伊人久久精品一区二区| 国产一区二区三区在线| 麻豆AV无码精品一区二区| 中文字幕在线精品视频入口一区| 国内精品视频一区二区三区 | 免费国产在线精品一区| 无码av免费毛片一区二区| 无码少妇一区二区| 熟女大屁股白浆一区二区| 大伊香蕉精品一区视频在线| 无码人妻AⅤ一区二区三区水密桃 无码欧精品亚洲日韩一区夜夜嗨 无码毛片一区二区三区中文字幕 无码毛片一区二区三区视频免费播放 | 国产精品99无码一区二区| 国产成人免费一区二区三区| 日韩美女在线观看一区| 国产精品一区二区三区高清在线| 亚洲Av永久无码精品一区二区| 亚洲一区二区三区成人网站| 亚洲AV无码一区二区大桥未久 | 无码人妻品一区二区三区精99 | 亚洲爆乳精品无码一区二区三区| 99国产精品一区二区| 综合无码一区二区三区| 一区二区国产在线观看| 亚洲av午夜精品一区二区三区 | 风间由美在线亚洲一区| 在线视频一区二区日韩国产| 国产精品免费综合一区视频| 色系一区二区三区四区五区| 国产中文字幕一区| 久夜色精品国产一区二区三区 | 日本精品少妇一区二区三区| 亚洲AV无码一区二区三区国产 | 福利一区二区在线| 久久精品人妻一区二区三区| 国模无码人体一区二区| 国产成人精品无码一区二区| 国产精品自在拍一区二区不卡|