資訊專欄INFORMATION COLUMN
摘要：主要有以下幾個(gè)步驟找一張小豬喬治的圖片參考對(duì)圖片中的部分進(jìn)行分解，并逐一實(shí)現(xiàn)廢話其實(shí)掌握了后，這些步驟都不難了，細(xì)心繪制就可以完成啦。我繪制的小豬喬治如圖參考資料用畫小豬佩奇，你就是下一個(gè)社會(huì)人
概述
之前看了一篇關(guān)于用CSS來畫小豬佩奇的文章，抱著鍛煉自己的心態(tài)造了個(gè)輪子，畫了個(gè)佩奇的小弟喬治，效果可以看這里，源碼在這里。
開發(fā)過程中也讓我對(duì)border-radius這個(gè)屬性有了更深刻的理解。
border-radius以前我在使用這個(gè)屬性時(shí)，只知道這個(gè)是表示圓角，常用border-radius: 5px實(shí)現(xiàn)圓角長(zhǎng)方形或者border-radius: 50%來畫圓形。在開發(fā)小豬的過程中，會(huì)需要使用許多不太規(guī)則的形狀，因此需要了解該屬性更深入的原理，才能滿足我的開發(fā)需求。
完全體該屬性的完全體如下：
border-radius: x1 x2 x3 x4 / y1 y2 y3 y4;
即任何值都可以轉(zhuǎn)為該種形式。例如，border-radius: 50%等價(jià)于border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%。name這8個(gè)值分別代表什么含義呢？
矩形的四個(gè)圓角我們可以分別進(jìn)行控制，例如矩形的左上圓角由x1和y1來控制，將一個(gè)水平半徑為x1，垂直半徑為y1的橢圓與矩形左上角相切，相切的兩個(gè)點(diǎn)之間的圓弧就是最終的圓角曲線。如下圖所示。
同理，x2和y2控制右上角，x3和y3控制右下角，x4和y4控制左上角?？刂频姆绞脚c左上角的類似。
小Tips如果對(duì)應(yīng)的x和y值相等，則可以省略成border-radius: x1 x2 x3 x4的形式；如果這些x也都相等，則可以省略成border-radius: x1的形式。
當(dāng)值使用百分比時(shí)，x取值是參照矩形的寬度，y是參照矩形的高度。比如寬200px，高100px的矩形，如果設(shè)置border-radius: 10% 10% 10% 10% / 10% 10% 10% 10%，轉(zhuǎn)換成像素等價(jià)于border-radius: 20px 20px 20px 20px / 10px 10px 10px 10px。
當(dāng)設(shè)置border-radius: 100%時(shí)，發(fā)現(xiàn)其表現(xiàn)與border-radius: 50%相同。這是因?yàn)槿绻椒较虻膬蓚€(gè)半徑和（x1+x2或者x3+x4）大于寬度，或者垂直方向的兩個(gè)半徑和(y1+y3或y2+y4)大于高度時(shí)，瀏覽器會(huì)對(duì)它們進(jìn)行等比例縮小，知道不再超出為止。
開始繪圖在了解了border-radius的原理后，就可以開始繪制了。
主要有以下幾個(gè)步驟：
找一張小豬喬治的圖片參考
對(duì)圖片中的部分進(jìn)行分解，并逐一實(shí)現(xiàn)（廢話）
其實(shí)掌握了border-radius后，這些步驟都不難了，細(xì)心繪制就可以完成啦。
我繪制的小豬喬治如圖
參考資料用CSS畫小豬佩奇，你就是下一個(gè)社會(huì)人！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113504.html
摘要：所以一開始讓我看小豬佩奇的時(shí)候我是拒絕的，因?yàn)槟悴荒茏屛铱?，我就馬上去看，第一我要試一下。其實(shí)這道題對(duì)于真正看了小豬佩奇的人來說是送分題，就看是不是真的看了。這里說的都是類，這也正是小豬佩奇的構(gòu)圖精髓，一種手繪風(fēng)格，而不是標(biāo)準(zhǔn)刻板的線條。 歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 作者：江志耿 | 騰訊TEG網(wǎng)絡(luò)工程師 我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽...
摘要：來自喬治亞理工大學(xué)研究人員創(chuàng)造了軟頭皮電子，一種用于讀取人類大腦信號(hào)的可穿戴式無線腦電圖設(shè)備。研究人員為該設(shè)備的電路使用了柔性基板，包括一個(gè)與藍(lán)牙控制器的無線接口。許多腦機(jī)接口研究人員的目標(biāo)是使殘疾用戶能夠只用大腦信號(hào)來控制設(shè)備。 .markdown-body{color:#595959;font-size:15px;font-family:-apple-system,system-ui,...
摘要：分解出來就是以左上角為例子小例子屬性允許您為元素添加圓角邊框效果總結(jié)可以用畫一些復(fù)雜的效果圖，下面鏈接大神畫的小豬佩奇，真是無所不能。 border-radius：左上 右上 右下 左下（就是順時(shí)針） 如果沒有4個(gè)值的情況下，缺的那個(gè)角的值與對(duì)角相等（如2、3、4） 1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;) 等價(jià)于...
摘要：它指向構(gòu)造函數(shù)的原型對(duì)象這是原型對(duì)象上的一個(gè)指向構(gòu)造函數(shù)的屬性。先看代碼的構(gòu)造函數(shù)創(chuàng)建一個(gè)的實(shí)例，小豬佩奇敲黑板，劃重點(diǎn)，理解這一句整個(gè)問題的關(guān)鍵，請(qǐng)多重復(fù)幾遍。也就是說小豬佩奇的原型，就是從繼承來的寫成代碼就是這個(gè)樣子。 ??沒錯(cuò)，我就是標(biāo)題黨！你已經(jīng)成功被我騙進(jìn)來了。來都來了，那就聊聊再走唄！接下來就聽我一本正經(jīng)地跟你說道說道。 ??Javascript的原型是這門語言的一個(gè)重點(diǎn)和...
摘要：每天一個(gè)社會(huì)人實(shí)現(xiàn)效果想法之前看到一篇博客，使用繪制出了小豬佩奇，所以自己想試一試，采用純繪制出低配版的小豬佩奇。在布局上，沒有堅(jiān)持嵌套，導(dǎo)致縮放時(shí)位置錯(cuò)位，如果想實(shí)行縮放一致，可采用小豬的頭部嵌套布局實(shí)現(xiàn)。 每天一個(gè)CSS-社會(huì)人 實(shí)現(xiàn)效果 showImg(https://segmentfault.com/img/remote/1460000016461611?w=667&h=620...
閱讀 2637·2021-11-23 09:51
閱讀 3173·2019-08-30 15:54
閱讀 1131·2019-08-30 14:14
閱讀 3600·2019-08-30 13:59
閱讀 1509·2019-08-29 17:09
閱讀 1536·2019-08-29 16:24
閱讀 2904·2019-08-29 15:43
閱讀 988·2019-08-29 12:45
