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