CSS是網頁開發中不可或缺的一部分，可以為網頁增加各種效果，比如寫花邊。下面我們就來看一下如何使用CSS寫花邊。

/*設置一個div作為容器*/
div{
border: 1px solid black;
width: 300px;
height: 300px;
position: relative;
}
/*設置邊框元素*/
div:before{
content: "";
position: absolute;
top: -5px; left: -5px; right: -5px; bottom: -5px;
border: 5px solid white;
z-index: -1;
}
/*設置花瓣元素*/
div:after{
content: "";
position: absolute;
z-index: -2;
border: 60px solid white;
border-radius: 50%;
transform: translateX(-50%);
}
/*設置花心元素*/
div span{
display: block;
position: absolute;
z-index: -1;
margin-top: -40px;
left: 50%;
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
transform: rotate(45deg) translateX(-50%);
}

通過以上代碼，我們可以實現一個簡單的花邊效果。首先我們設置一個div作為容器，然后使用:before和:after偽元素來分別創建邊框和花瓣。其中:before的border樣式需要比容器的寬度和高度都多5px，這樣可以將超出容器的邊框隱藏起來。而:after的border樣式則需要設置一個大一些的數值，這樣才能看出花瓣的形狀。

接著，我們還需要設置一個花心元素，可以使用span標簽來創建。將其位置設置在容器正中央，再使用rotate和translateX屬性，將其旋轉45度并向左平移一定距離，就可以得到一個完整的花邊效果了。

這只是一個簡單的例子，通過不同的參數設置，我們可以創建出各種花邊效果。當然也可以使用其他的CSS屬性，比如漸變、陰影等等，讓花邊更加真實、立體化。