CSS是網頁設計和開發中必不可少的技術，它可以讓我們實現各種效果，其中之一就是矩形變線的效果。矩形變線是什么？它是指在原本是矩形的圖形，通過CSS的樣式變化，變成了一條線。

.box{
width: 200px;
height: 100px;
background-color: #f5f5f5; 
border: 3px solid #000;
border-radius: 4px;
position: relative;
}
.box:before {
content: "";
position: absolute;
left: -3px;
top: -3px;
width: 3px;
height: 100%;
background-color: #000;
}
.box:after {
content: "";
position: absolute;
right: -3px;
top: -3px;
width: 3px;
height: 100%;
background-color: #000;
}
.box:before,
.box:after {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}

如上所示，我們可以使用偽元素:before和:after來實現這一效果。首先，我們要定義一個矩形的盒子，并給它一個背景顏色和邊框。接著，在:before和:after中，分別定義了一個寬為3px、高為100%、顏色為黑色的盒子，并將它們放置在盒子的左上角和右上角。最后，通過border-radius將它們的四個角變為圓角。

這樣，我們就實現了一個矩形變線的效果！如果你還想讓它更具有吸引力，可以通過動畫效果，讓這條線閃閃發光。