在寫前端過程中，經常會有需要畫出一個圖形的需求，比如畫一個圓形，用css應該怎么畫出來呢？

圓形CSS代碼

只需要將你的網頁元素的每個邊的border-radius甚至成50%，你就能得到任意大小的圓

.circle {
	border-radius: 50%;
	width: 200px;
	height: 200px; 
	/* 寬度和高度需要相等 */}

這確實是非常的簡單，但我們無法抵擋在之上使用CSS漸變色和基本旋轉動畫的誘惑

/* 動畫定義 */@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }}/* 旋轉，漸變色 */#advanced {
	width: 200px;
	height: 200px;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
animation-name: spin; 
	animation-duration: 3s; /* 3 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;}

哇塞，這就是這個漂亮的CSS圓形了！