在CSS中,要畫(huà)出漂亮的櫻花并不難。下面我將向大家介紹幾種常用的方法。
/* 方法一:使用border-radius和偽元素before與after */ .sakura1 { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 5px solid #ffb6c1; } .sakura1:before, .sakura1:after { content: ""; position: absolute; top: -8px; width: 20px; height: 20px; border-radius: 50%; border: 5px solid #ffb6c1; } .sakura1:before { left: -10px; } .sakura1:after { right: -10px; } /* 方法二:使用radial-gradient */ .sakura2 { width: 30px; height: 30px; background: radial-gradient(circle at 25% 25%, #fff 0, #fff 8px, #ffb6c1 10px, #ffb6c1 13px, #fff 15px, #fff 70%); border-radius: 50%; position: relative; } .sakura2:before, .sakura2:after { content: ""; position: absolute; top: 7px; width: 10px; height: 10px; background: #ffb6c1; border-radius: 50%; } .sakura2:before { left: 5px; } .sakura2:after { right: 5px; } /* 方法三:使用svg */ .sakura3 svg { width: 50px; height: 50px; } .sakura3 circle { fill: #ffb6c1; } .sakura3 .petal { stroke: #ffb6c1; stroke-width: 10px; stroke-linecap: round; }
方法一使用了border-radius和偽元素before與after來(lái)實(shí)現(xiàn)櫻花的效果;方法二則是使用radial-gradient來(lái)創(chuàng)建漸變效果,同時(shí)通過(guò)偽元素來(lái)給櫻花添加左右兩個(gè)小圓點(diǎn);方法三則是使用SVG來(lái)實(shí)現(xiàn),給櫻花花瓣畫(huà)上了粉色的描邊,而櫻花本身則是一個(gè)圓形。
以上三種方法均可根據(jù)需要進(jìn)行調(diào)整,例如更改顏色、大小、數(shù)量等。希望這篇文章可以幫助到大家繪制出自己的漂亮櫻花。
上一篇int php
下一篇css中怎么覆蓋圖片