在前端開發(fā)中，CSS 又被稱為"萬能的瑞士軍刀"，除了可以布局和美化網(wǎng)頁之外，還可以根據(jù)你的需要創(chuàng)建各種形狀的圖形，下面我們就一起來學習一下。
一、 矩陣
在 CSS 中，我們可以使用 box-shadow 屬性來創(chuàng)建矩陣。這個其實是很常見的，我們可以通過 box-shadow 設置多個不同的陰影，來達到創(chuàng)建一個矩陣的目的。
pre{
box-shadow: 0 0 0 4px #333;
}
二、圓形
創(chuàng)建圓形以前，我們需要了解一下 CSS 中的兩個非常重要的屬性：border-radius 和 width。border-radius 可以設置一個元素的邊角的圓角程度，而 width 可以設置元素的寬度。
下面是一個示例：
pre{
width: 50px;
height: 50px;
border-radius: 50%;
background: #f00;
}
三、三角形
要創(chuàng)建一個三角形，我們需要靈活運用 border 這個屬性。border-top、border-right、border-bottom、border-left 分別代表了邊界的上、右、下、左。我們可以通過設置三條邊的顏色、寬度以及對應的位置來創(chuàng)建一個三角形。
pre {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid #f00;
border-bottom: 50px solid transparent;
}
四、梯形
想要創(chuàng)建一個梯形，和三角形的原理類似，只不過多了一條邊的設置。我們可以通過設置兩邊的寬度和高度來創(chuàng)建不同的梯形形狀。
pre {
width: 100px;
height: 0;
border-top: 40px solid #f00;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
以上就是 CSS 中創(chuàng)建各種形狀圖形的常用方法，當然還有很多方式能夠讓我們做出更為復雜的形狀，這里只介紹了最基礎的幾種，希望對大家有所幫助。