每個人都是獨立的個體，大白也不例外，仔細觀察大白有一個圓圓的頭加一對黑溜溜的眼睛，沒有腹肌的軀干和一顆裸露的心臟，圓滾滾的肚子兩邊一對寬厚的臂膀，仔細看還有兩個萌萌噠小手指呢，最后一對粗的像大象一樣的大腿才能支撐這軟軟的肚子嘛，哈哈~

因為大白是白的，所以我們可以定義一個深顏色的背景來突出一下大白，讓我們在茫茫屏幕中一眼就能看到它，歐耶~

/*使用了一個漸變色，沒有做各個瀏覽器的兼容性處理*/body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}

定義個div容器，控制大白在屏幕中的整體位置

 !--定義大白的存放容器-- div id= baymax /div #baymax { margin: 0 auto;/*設置為 居中*/ height: 600px; /*設置高度*/ overflow: hidden; /*隱藏溢出*/}

大白的頭部是一個橢圓形的，不用canvas自帶的畫橢圓的方法最先想到的就是先畫一個長方形然后用圓角矩形（border-radius，設置成50%會有圓形的效果）的方法繪制。

頭部下巴那邊有一層灰色的陰影，我們在長方形的下面加一個灰色的底邊框就可以了。

眼睛也是圓形的可以用同樣的方法，將眼睛和嘴巴（那是嘴巴嗎？）相對定位在頭部相應位置即可。

 !-- 定義頭部，包括兩個眼睛、嘴 --  div id= head  div id= eye  /div  div id= eye2  /div  div id= mouth  /div  /div #head { height: 64px;width: 100px; border-radius: 50%; /*以百分比定義圓角的形狀*/ background: #fff; /*定義背景顏色*/ margin: 0 auto;/*頭部居中*/ margin-bottom: -20px;/*這個是為了使頭部與身體融為一體*/ border-bottom: 5px solid #e0e0e0; /*設置下邊框的樣式，制作陰影的效果*/ z-index: 100; /*屬性設置元素的堆疊順序；擁有更高堆疊順序的元素總是會 處于堆疊順序較低的元素的前面*/ position: relative; /*生成相對定位的元素，方便眼睛和嘴巴的定位*/}#eye,#eye2 {width: 11px;height: 13px;background: #282828;border-radius: 50%; position: relative; /*生成相對定位的元素，相對于上層頭部容器的位置*/ top: 30px;left: 27px; transform: rotate(8deg);/*旋轉該元素，讓眼睛有一定的角度*/}#eye2 { transform: rotate(-8deg); /*使左右兩只眼睛旋轉對稱*/ left: 69px; /*設置第二只眼睛相對于頭部的位置*/ top: 17px;}#mouth {width: 38px;height: 1.5px;background: #282828; position: relative;/*生成相對定位的元素，相對于上層頭部容器的位置*/ left: 34px;top: 10px;}

大白脖子到肚子之間的軀干比頭部大比肚子小，可以想象成一個豎著的橢圓形跟其他部分拼接而成（要有想象力哦，不像畫畫，肯定是要各種圖形拼接的）。

心臟就是一個圓形，里面的月牙效果可以用內部陰影做出效果。

 !-- 定義軀干，包括心臟 --  div id= torso  div id= heart  /div  /div #torso {margin: 0 auto;height: 200px; width: 180px;background: #fff; border-radius: 47%;/*設置圓角*/ border: 5px solid #e0e0e0;/*設置邊框*/ border-top: none;/*因為頂部要跟頭部做銜接，所以頂部不設置邊框*/ z-index: 1;/*保證軀干堆疊在頭部的里面*/#heart{width:25px;height:25px;border-radius:50%;box-shadow:2px 5px 2px #ccc inset;/*向邊框四周添加陰影效果*/position:relative;/*設置心臟相對于軀干的位置*/ right:-115px;top:40px;z-index:111;/*保證心臟堆疊在軀干的外面*/border:1px solid #ccc;}

大白的肚子腹部就是比軀干大一圈的橢圓然后移到軀干的中間位置。

但是在銜接部分會有邊框的影響，我們可以用一個白色的橢圓將銜接部分的邊框遮蓋住就可以了。

 !-- 定義肚子腹部，包括 cover（和軀干的連接處） --  div id= belly  div id= cover  /div  /div #belly { margin: 0 auto;height: 300px;width: 245px; margin-top: -140px;/*將腹部往上移動，差不多移到軀干的中間位置*/ background: #fff;border-radius: 47%; border: 5px solid #e0e0e0; /*設置邊框*/ border-top: none; z-index: 5;/*保證腹部堆疊在軀干的外面*/}#cover { width: 190px;background: #fff;height: 150px;margin: 0 auto; position: relative;/*將cover部分相對定位到要遮擋的位置*/ top: -20px;border-radius: 50%;}

手臂部分是用一個傾斜的橢圓做成，然后隱藏到軀干后面對應的位置即可。

兩個小手指也是兩個傾斜的小橢圓組合而成，定位到手臂對應的位置即可。

 !-- 定義左臂，包括一大一小兩個手指 -- div id= left-arm div id= l-bigfinger /div div id= l-smallfinger /div /div !-- 定義右臂，同樣包括一大一小兩個手指 -- div id= right-arm div id= r-bigfinger /div div id= r-smallfinger /div /div #left-arm,#right-arm { height: 270px;width: 120px;border-radius: 50%;background: #fff; margin: 0 auto; position: relative; /*將手臂相對定位到相應的位置*/ top: -350px;left: -100px; transform: rotate(20deg); /*將手臂（橢圓）順時針旋轉20度，更加貼合軀干*/ z-index: -1;/*保證手臂堆疊在軀干的里面*/}#right-arm { transform: rotate(-20deg);/*右手臂（橢圓）相應的逆時針旋轉20度，與左手臂對稱*/ left: 100px;top: -620px;}#l-bigfinger,#r-bigfinger { height: 50px;width: 20px;border-radius: 50%;background: #fff; position: relative;/*將大手指相對定位到相應的位置，并相應的旋轉*/ top: 250px;left: 50px;transform: rotate(-50deg);}#r-bigfinger { left: 50px;transform: rotate(50deg);}#l-smallfinger,#r-smallfinger { height: 35px;width: 15px;border-radius: 50%;background: #fff; position: relative;;/*將小手指相對定位到相應的位置，并相應的旋轉*/ top: 195px; left: 66px;transform: rotate(-40deg);}#r-smallfinger { transform: rotate(40deg);left: 37px;}

腿的畫法就是在矩形的基礎上，用border-radius方法在矩形的四邊畫出不同程度的圓角形成腿的形狀就行，然后將腿相對定位到身體對應的位置即可。

 !-- 定義左腿 --  div id= left-leg  /div  !-- 定義右腿 --  div id= right-leg  /div #left-leg,#right-leg { height: 170px;width: 90px; border-radius: 40% 30% 10px 45%;/*矩形的左上、右上、左下、右下各個角度畫不同程度的圓角*/ background: #fff; position: relative;/*相對定位到對應的位置*/ top: -640px;left: -45px; transform: rotate(-1deg); z-index: -2;/*保證腿部堆疊在最下面*/ margin: 0 auto;}#right-leg { border-radius:30% 40% 45% 10px; top: -810px;left: 50px; transform: rotate(1deg);}

看完整個教程，是不是覺得畫一個大白其實就很少的幾個知識點：border-radius、position: relative、 z-index、transform: rotate(*deg)、border、box-shadow，剩下的就是靠position和z-index各種定位拼接堆疊，只要想明白了要哪些基本元素，就可以很輕松的拼接成一個萌萌的大白哦~下面我把所有的零部件列舉出來，怎么拼接就看自己的想象力咯~哈哈

 !DOCTYPE html html head meta charset= utf-8 meta content= IE=edge,chrome=1 http-equiv= X-UA-Compatible title html+css實現大白的畫法 /title meta content= name= description meta content= name= keywords style type= text/css /*定義整體的背景色*/ body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}  #baymax {/*設置為 居中*/margin: 0 auto;/*高度*/height: 600px;/*隱藏溢出*/overflow: hidden;}#head {height: 64px;width: 100px;/*以百分比定義圓角的形狀*/border-radius: 50%;/*背景*/background: #fff;margin: 0 auto;margin-bottom: -20px;/*設置下邊框的樣式*/border-bottom: 5px solid #e0e0e0;/*屬性設置元素的堆疊順序； 擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面*/z-index: 100;/*生成相對定位的元素*/position: relative;}#eye,#eye2 {width: 11px;height: 13px;background: #282828;border-radius: 50%;position: relative;top: 30px;left: 27px;/*旋轉該元素*/transform: rotate(8deg);}#eye2 {/*使其旋轉對稱*/transform: rotate(-8deg);left: 69px;top: 17px;}#mouth {width: 38px;height: 1.5px;background: #282828;position: relative;left: 34px;top: 10px;}#torso,#belly {margin: 0 auto;height: 200px;width: 180px;background: #fff;border-radius: 47%;/*設置邊框*/border: 5px solid #e0e0e0;border-top: none;z-index: 1;}#belly {height: 300px;width: 245px;margin-top: -140px;z-index: 5;}#cover {width: 190px;background: #fff;height: 150px;margin: 0 auto;position: relative;top: -20px;border-radius: 50%;}#heart{ width:25px; height:25px; border-radius:50%; position:relative; /*向邊框四周添加陰影效果*/ box-shadow:2px 5px 2px #ccc inset; right:-115px; top:40px; z-index:111; border:1px solid #ccc;}#left-arm,#right-arm {height: 270px;width: 120px;border-radius: 50%;background: #fff;margin: 0 auto;position: relative;top: -350px;left: -100px;transform: rotate(20deg);z-index: -1;}#right-arm {transform: rotate(-20deg);left: 100px;top: -620px;}#l-bigfinger,#r-bigfinger {height: 50px;width: 20px;border-radius: 50%;background: #fff;position: relative;top: 250px;left: 50px;transform: rotate(-50deg);}#r-bigfinger {left: 50px;transform: rotate(50deg);}#l-smallfinger,#r-smallfinger {height: 35px;width: 15px;border-radius: 50%;background: #fff;position: relative;top: 195px;left: 66px;transform: rotate(-40deg);}#r-smallfinger {background: #fff;transform: rotate(40deg);top: 195px;left: 37px;}#left-leg,

以上就是html實現一個可愛的大白圖文實例的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。