CSS3是構建網頁樣式的一種標準，通過CSS3，我們可以讓網頁更加美觀，更具吸引力，下面是CSS3基礎入門。

1. CSS3選擇器：

/* 標簽選擇器 */
p {
color: red;
}
/* ID選擇器 */
#idName {
font-size: 20px;
}
/* 類選擇器 */
.className {
font-style: italic;
}
/* 屬性選擇器 */
[title="hello"] {
background-color: yellow;
}

2. CSS3布局方式：

/* 盒子模型 */
div {
width: 200px;
height: 200px;
background-color: red;
margin: 10px;
padding: 20px;
border: 2px solid black;
}
/* 浮動布局 */
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
/* 彈性布局 */
.container {
display: flex;
justify-content: center;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
}

3. CSS3動畫效果：

/* 載入動畫 */
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-circle {
border: 3px solid #ccc;
border-top: 3px solid #000;
border-radius: 50%;
width: 20px;
height: 20px;
animation: loading 0.6s linear infinite;
}
/* 過渡動畫 */
.transition {
width: 100px;
height: 100px;
background-color: red;
transition: width 0.3s ease-out;
}
.transition:hover {
width: 200px;
}

通過學習CSS3基礎入門，你將為構建更好的網頁樣式打下堅實的基礎。