CSS3作圖是一種前端開發技術，它可以實現各種炫酷的動態效果。以下是一些常見的CSS3作圖方法。

/* 圓形邊框 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #666;
}
/* 漸變背景 */
.gradient {
background: linear-gradient(to bottom right, #f00, #00f);
}
/* 懸停效果 */
.hover {
transition: transform .3s ease-in-out;
}
.hover:hover {
transform: scale(1.1);
}
/* 旋轉動畫 */
.rotate {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 3D翻轉 */
.flip {
transform-style: preserve-3d;
perspective: 1000px;
}
.flip >div {
backface-visibility: hidden;
transition: transform .6s;
}
.flip:hover >div {
transform: rotateY(180deg);
}
/* 盒子陰影 */
.box {
box-shadow: 0 2px 4px rgba(0,0,0,.6);
}

以上的代碼只是CSS3作圖中的冰山一角，還有更多更復雜的效果可以實現。不過需要注意的是，CSS3作圖過程中也要注意瀏覽器兼容性，避免在某些瀏覽器中出現不可預期的情況。