2. 程式人生 > >45個值得收藏的 CSS 形狀

45個值得收藏的 CSS 形狀

阿新 • • 發佈：2019-04-22

摘要： CSS炫技。

Fundebug經授權轉載，版權歸原作者所有。

CSS能夠生成各種形狀。正方形和矩形很容易，因為它們是 web 的自然形狀。新增寬度和高度，就得到了所需的精確大小的矩形。新增邊框半徑，你就可以把這個形狀變成圓形，足夠多的邊框半徑，你就可以把這些矩形變成圓形和橢圓形。

我們還可以使用 CSS 偽元素中的 ::before 和 ::after，這為我們提供了向原始元素新增另外兩個形狀的可能性。通過巧妙地使用定位、轉換和許多其他技巧，我們可以只用一個 HTML 元素在 CSS 中建立許多形狀。

雖然我們現在大都使用字型圖示或者svg圖片，似乎使用 CSS 來做圖示意義不是很大，但怎麼實現這些圖示用到的一些技巧及思路是很值得我們的學習。

1.正方形

#square {
  width: 100px;
  height: 100px;
  background: red;
}

2.長方形

#rectangle {
  width: 200px;
  height: 100px;
  background: red;
}

3.圓形

#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}

4.橢圓形

#oval {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}

5.上三角

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

6.下三角

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

7.左三角

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

8.右三角

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

9.左上角

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

10.右上角

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

11.左下角

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

12.右下角

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

13.箭頭

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}

14.梯形

#trapezoid {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}

15.平行四邊形

#parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: red;
}

16.星星 (6角)

#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}

17.星星 (5角)

#star-five {
  margin: 50px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

18.五邊形

#pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: red transparent;
}
#pentagon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent red;
}

19.六邊形

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}

20.八邊形

#octagon {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#octagon:before {
  content: "";
  width: 100px;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid red;
  border-left: 29px solid #eee;
  border-right: 29px solid #eee;
}
#octagon:after {
  content: "";
  width: 100px;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid red;
  border-left: 29px solid #eee;
  border-right: 29px solid #eee;
}

21.愛心

#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

22.無窮大

#infinity {
  position: relative;
  width: 212px;
  height: 100px;
  box-sizing: content-box;
}
#infinity:before,
#infinity:after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 20px solid red;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
#infinity:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

23.菱形

#diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: red;
  position: relative;
  top: -50px;
}
#diamond:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
}

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

24.鑽石1

#diamond-shield {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 20px solid red;
  position: relative;
  top: -50px;
}
#diamond-shield:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 20px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

25.鑽石2

#cut-diamond {
  border-style: solid;
  border-color: transparent transparent red transparent;
  border-width: 0 25px 25px 25px;
  height: 0;
  width: 50px;
  box-sizing: content-box;
  position: relative;
  margin: 20px 0 50px 0;
}
#cut-diamond:after {
  content: "";
  position: absolute;
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: red transparent transparent transparent;
  border-width: 70px 50px 0 50px;
}

26.鑽戒

#diamond-narrow {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid red;
  position: relative;
  top: -50px;
}
#diamond-narrow:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

27. 雞蛋

#egg {
  display: block;
  width: 126px;
  height: 180px;
  background-color: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

28.吃豆人

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

29.對話泡泡

#talkbubble {
  width: 120px;
  height: 80px;
  background: red;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}

30. 12點 爆發

#burst-12 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
}
#burst-12:before,
#burst-12:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
#burst-12:before {
  transform: rotate(30deg);
}
#burst-12:after {
  transform: rotate(60deg);
}

31. 8點 爆發

#burst-8 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
}
#burst-8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
  transform: rotate(135deg);
}

32.太極

#yin-yang {
  width: 96px;
  box-sizing: content-box;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}
#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  box-sizing: content-box;
}

33.徽章絲帶

#badge-ribbon {
  position: relative;
  background: red;
  height: 100px;
  width: 100px;
  border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
  content: '';
  position: absolute;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px;
  left: -10px;
  transform: rotate(-140deg);
}
#badge-ribbon:after {
  left: auto;
  right: -10px;
  transform: rotate(140deg);
}

34.太空入侵者（電腦遊戲名）

#space-invader {
  box-shadow: 0 0 0 1em red,
  0 1em 0 1em red,
  -2.5em 1.5em 0 .5em red,
  2.5em 1.5em 0 .5em red,
  -3em -3em 0 0 red,
  3em -3em 0 0 red,
  -2em -2em 0 0 red,
  2em -2em 0 0 red,
  -3em -1em 0 0 red,
  -2em -1em 0 0 red,
  2em -1em 0 0 red,
  3em -1em 0 0 red,
  -4em 0 0 0 red,
  -3em 0 0 0 red,
  3em 0 0 0 red,
  4em 0 0 0 red,
  -5em 1em 0 0 red,
  -4em 1em 0 0 red,
  4em 1em 0 0 red,
  5em 1em 0 0 red,
  -5em 2em 0 0 red,
  5em 2em 0 0 red,
  -5em 3em 0 0 red,
  -3em 3em 0 0 red,
  3em 3em 0 0 red,
  5em 3em 0 0 red,
  -2em 4em 0 0 red,
  -1em 4em 0 0 red,
  1em 4em 0 0 red,
  2em 4em 0 0 red;
  background: red;
  width: 1em;
  height: 1em;
  overflow: hidden;
  margin: 50px 0 70px 65px;
}

35.電視

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

36.雪佛龍

#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: red;
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  transform: skew(0deg, -6deg);
}

37.放大鏡

#magnifying-glass {
  font-size: 10em;
  display: inline-block;
  width: 0.4em;
  box-sizing: content-box;
  height: 0.4em;
  border: 0.1em solid red;
  position: relative;
  border-radius: 0.35em;
}
#magnifying-glass:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: -0.25em;
  bottom: -0.1em;
  border-width: 0;
  background: red;
  width: 0.35em;
  height: 0.08em;
  transform: rotate(45deg);
}

38.Facebook圖示

#facebook-icon {
  background: red;
  text-indent: -999em;
  width: 100px;
  height: 110px;
  box-sizing: content-box;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 15px solid red;
  border-bottom: 0;
}
#facebook-icon:before {
  content: "/20";
  position: absolute;
  background: red;
  width: 40px;
  height: 90px;
  bottom: -30px;
  right: -37px;
  border: 20px solid #eee;
  border-radius: 25px;
  box-sizing: content-box;
}
#facebook-icon:after {
  content: "/20";
  position: absolute;
  width: 55px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 5px;
  box-sizing: content-box;
}

39.月亮

#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

40.旗

#flag {
  width: 110px;
  height: 56px;
  box-sizing: content-box;
  padding-top: 15px;
  position: relative;
  background: red;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
#flag:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #eee;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

41.圓錐

 #cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  border-radius: 50%;
}

42.十字架

#cross {
  background: red;
  height: 100px;
  position: relative;
  width: 20px;
}
#cross:after {
  background: red;
  content: "";
  height: 20px;
  left: -40px;
  position: absolute;
  top: 40px;
  width: 100px;
}

43.根基

 #base {
  background: red;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 100px;
}
#base:before {
  border-bottom: 35px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -35px;
  width: 0;
}

44.指示器

#pointer {
  width: 200px;
  height: 40px;
  position: relative;
  background: red;
}
#pointer:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
#pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

45.鎖

#lock {
  font-size: 8px;
  position: relative;
  width: 18em;
  height: 13em;
  border-radius: 2em;
  top: 10em;
  box-sizing: border-box;
  border: 3.5em solid red;
  border-right-width: 7.5em;
  border-left-width: 7.5em;
  margin: 0 0 6rem 0;
}
#lock:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 2.5em solid red;
  width: 14em;
  height: 12em;
  left: 50%;
  margin-left: -7em;
  top: -12em;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
}
#lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 1em solid red;
  width: 5em;
  height: 8em;
  border-radius: 2.5em;
  left: 50%;
  top: -1em;
  margin-left: -2.5em;
}

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家免費試用！

相關推薦

45個值得收藏的 CSS 形狀

摘要： CSS炫技。 原文：45個值得收藏的 CSS 形狀 作者：前端小智 Fundebug經授權轉載，版權歸原作者所有。 C

21個值得收藏的Javascript技巧

　在本文中列出了21個值得收藏的Javascript技巧,在實際工作中,如果能適當運用,則大大提高工作效率。 　　1  Javascript陣列轉換為CSV格式 　　首先考慮如下的應用場景,有一個Javscript的字元型(或者數值型)陣列,現在需要轉換為以逗號分割的CSV格式檔案。則我們可以使

30個值得收藏可免費搜尋/下載PDF電子圖書（文件）的搜尋引擎

PDF全稱Portable Document Format，譯為可移植文件格式，是一種跨平臺的電子檔案格式。與Doc、Txt電子書相比，PDF電子書更值得我們珍藏，因為它不像前兩者那樣內容容易被修改，且介面更簡潔，用專業的PDF閱覽器可以很方便地隨機閱讀電子書仍一章節的內容。目前，提供免費PDF電子書的網

下篇 | 大數據公司挖掘數據價值的49個典型案例（值得收藏）

iic 關聯分析 ada 還需 信息服務 性方面 做到 展開 idt 緊接著上篇中的25項案例介紹剩余其他的大數據公司挖掘數據價值的典型案例... 26. 眾趣的行為辯析 眾趣是國內第一家社交媒體數據管理平臺，目前國內主要的社交開放平臺在用戶數據的開放性方面仍比較保

27個機器學習的小抄你值得收藏

www. known lob note 包括 如果 mov sta 總結 機器學習(Machine Learning)有很多方面，當我開始研究學習它時，我發現了各種各樣的“小抄”，它們簡明地列出了給定主題的關鍵知識點。最終，我匯集了超過 20 篇的機器學習相關的小抄，其中一

開掛了！這5個Word技巧真的是超級實用，值得收藏！

並且 工作效率 ack delete 分享 入行 布局 tle 內容 在實際工作中，一些小技巧往往是提高我們工作效率的重要因素，今天給大家分享5個實用的Word技巧，讓你的工作效率翻倍。 1、快速選中圖形 如何快速刪除文檔中的圖形呢？點擊開始——編輯——選擇——選擇

值得收藏的八個常用的js正則表示式

 開發中如果有input輸入框，難免就要寫正則表示式，因此在這裡總結了一些常見常用的正則表示式的書寫方法，希望會大家有所幫助； 附圖：   一.手機號碼 $(document).ready(function(){ //判斷輸入手機號碼是否正確

38個電腦常用快捷鍵，有需要的朋友趕緊來拿，值得收藏一份！

你是不是還在因為不熟練電腦操而煩惱嗎？那麼今天教大家38個電腦上常用的快捷鍵，這時候很多朋友會問:"人家一次分享快捷鍵都是七八十到一百多個，你就分享38個".其實電腦快捷鍵全部加在一起有幾百個，其實常用的快捷鍵也就那麼幾十個，有句話說的好東西不在多，在於它是實不實用！ 好了閒話不多說下面為大家分

值得收藏的22個Python運用技巧

1. 原地交換兩個數字 Python 提供了一個直觀的在一行程式碼中賦值與交換（變數值）的方法，請參見下面的示例： x, y = 10, 20 print(x, y) x, y = y, x print(x, y) #1 (10, 20) #2 (20, 10

23個 Git 最常用命令速查手冊，值得收藏！

Git的四個組成部分 1、初始化倉庫 git init 2、將檔案新增到倉庫 git add 檔名 # 將工作區的某個檔案新增到暫存區    git add -u # 新增所有被tracked檔案中被修改或刪除的檔案資訊到暫存區，不處理untracked的檔案

分享45個android例項原始碼，很好很強大.收藏吧！！！

新增微訊號：apkbus,回覆“視訊”即可獲取400套免費Android開發視訊教程分享45個android例項原始碼，很好很強大http://www.apkbus.com/android-20978-1-1.htmlandriod鬧鐘原始碼http://www.apkbu

前端特效demo | 值得收藏的6個 HTML5 Canvas 實用案例

一起 開發 線路 mage 降落 收藏 案例 前端 同時 HTML5 動畫在Canvas 上得到了充分的發揮，我們 VIP 視頻也分享過很多相關的動畫特效制作視頻，這次給大家帶來 6 款超炫酷的HTML5 canvas 動畫的 demo，一起來看看吧~ 文內附有

140個絕對值得收藏的電腦技巧(4)

61.禁止IE的定期更新 在我們上網以後，Windows XP經常會在工作列上彈出一個提示你升級系統檔案的訊息，其實這是IE瀏覽器的定期更新檢查在作怪，大約每30天左右，Windows XP系統附帶的IE6.0就會定期檢查是否有新的升級軟體，如果有，你沒有下載升級，便會彈出上

Web設計師值得收藏的10個jQuery特效

   先試試看？特效例項： View jQuery Demos：http://www.webdesignerwall.com/demo/jquery/ jQuery是如何工作的？ 首先，你需要下載一個jQuery版本，並將它插入到<head>標籤內。然後，你將需

45個純 CSS 實現的精美邊框效果【附原始碼】

確實覺得很好，但是貼上不過來，所以把連線分享給大家了。 地址：http://www.cnblogs.com/lhb25/archive/2012/08/29/css-border-and-box-effect-a.html 地址：http://www.cnblogs

140個絕對值得收藏的電腦技巧(5)

101.到微軟站點下載Bootvis.exe檔案，啟動它，依次選擇選單裡面的Trace--Optimize System，這時候系統會提示是否重新啟動，選擇啟動，重啟登入以後什麼都別動， 　　過一段時間會自動彈出一個對話方塊，對話方塊上寫著系統分析的意思，你什麼都別做，要一直

值得收藏的8個Web端組件庫

get 常用 後臺應用 上海 開發 好的 lar clas yun 值得收藏的8個Web端組件庫 Ant Design 介紹：一個服務於企業級產品的設計體系，基於『確定』和『自然』的設計價值觀和模塊化的解決方案，讓設計者專註於更好的用戶體驗。 組件庫地址：htt

@程式設計師，這四個學習建議值得收藏

在我看來，學習能力應該是一個人最重要的能力之一。因為我們賴以生存的所有技能，無一例外都是通過學習獲得的。那些優秀的人，也不過是學習能力或者學習效率比一般人強而已。 這樣的觀點被很多人論證過，商業理論家阿里·德赫斯（Arie de Geus）曾說過，“比你的競爭對手學習速度更快，可能

10個值得深思的PHP面試題

number 進制 程序 false convert val 數字轉換 str1 long 第一個問題關於弱類型 $str1 = ‘yabadabadoo‘; $str2 = ‘yaba‘; if (strpos($str1,$str2)) { echo "/""

玩轉Win10的45個快捷鍵

開始 100% html 我們 頁面 同時 提示 技術 get 1Win10快捷鍵大全（第一部分） 　　Win10發布已經快兩個星期了，各項新功能也讓小夥伴們興奮不已。和之前系統一樣，Win10也加入了很多經典的快捷鍵，同時還加入了全新觸控手勢。今天小