CSS3是一個非常強大的前端技術，可以使用它來實現很多有趣的效果。其中一個效果就是組織架構圖。下面我們來看看如何使用CSS3畫出組織架構圖。

/* 定義組織架構圖的樣式 */
.org-chart {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
/* 定義節點的樣式 */
.org-chart ul {
display: flex;
justify-content: space-between;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
/* 定義節點連線的樣式 */
.org-chart ul:before, .org-chart ul:after {
content: '';
display: block;
position: absolute;
top: 50%;
height: 0;
border-top: 1px solid black;
width: 50%;
z-index: -1;
}
.org-chart ul:before {
left: 0;
}
.org-chart ul:after {
right: 0;
}
/* 定義節點內容的樣式 */
.org-chart li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
margin: 0 0 0 -60px;
border-radius: 50%;
background: white;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
font-size: 16px;
}
/* 定義節點內容中的文字樣式 */
.org-chart li span {
font-weight: bold;
margin-top: 5px;
}
/* 定義箭頭的樣式 */
.org-chart li:before, .org-chart li:after {
content: '';
display: block;
position: absolute;
top: 100%;
height: 50%;
width: 0;
border-left: 1px solid black;
}
.org-chart li:before {
left: 50%;
}
.org-chart li:after {
right: 50%;
transform: scaleX(-1);
}
/* 對第一個和最后一個節點特殊處理 */
.org-chart ul li:first-child:before, .org-chart ul li:first-child:after {
display: none;
}
.org-chart ul li:last-child:before, .org-chart ul li:last-child:after {
height: 0;
}
.org-chart ul li:last-child:before {
border-right: 1px solid black;
}
.org-chart ul li:last-child:after {
border-left: 1px solid black;
}

以上就是CSS3畫組織架構圖的樣式代碼。我們可以將這些代碼放到一個CSS文件中，然后在HTML中引用這個CSS文件，就可以實現組織架構圖的效果了。