CSS可以用來創建各種類型的網頁，其中包括圖形、布局和樣式。在這個例子中，我們將使用CSS來創建一個盒子，并將其繪制成一個正方形。
在HTML中，我們可以創建一個包含盒子元素的<div>元素，如下所示：
```html
<div class="box">
<p>這是一個盒子，里面有一些文本。</p>
</div>
在CSS中，我們可以使用以下代碼來定義盒子的樣式：
```css
.box {
width: 200px;
height: 200px;
border: 10px solid green;
這個代碼定義了一個寬度為200像素、高度為200像素的盒子，并使用了border屬性將其繪制成一個10像素的綠色邊框。
接下來，我們可以使用CSS的盒子模型來調整盒子的大小和位置，使其成為一個正方形。我們可以使用以下代碼：
```css
.box {
position: relative;
width: 200px;
height: 200px;
.box:before,
.box:after {
content: "";
position: absolute;
left: 50%;
width: 0;
height: 0;
border-left: 100px solid green;
border-right: 0;
.box:before {
top: -50px;
left: 100px;
.box:after {
top: 0;
left: 100px;
這個代碼將一個正方形的邊框設置為綠色，并將其居中對齊。使用border-left和border-right屬性可以確保正方形的左右邊是相等的，并且寬度為100像素。
通過使用CSS的盒子模型和border屬性，我們可以輕松地創建一個盒子，并將其繪制成一個正方形。
上一篇css js動態炫酷背景
下一篇css編輯所有相同字母