Css大全實例
以下是一些CSS大全的實例:
1. 基本的CSS樣式:
```css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
font-size: 16px;
}
```
2. 文本陰影:
```css
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
```
3. 框線圓角:
```css
div {
border-radius: 10px;
}
```
4. 漸變背景:
```css
div {
width: 300px;
height: 200px;
background: linear-gradient(to right, red, orange);
}
```
5. 回響式布局:
使用媒體查詢可以實現回響式布局,例如:
```css
@media screen and (max-width: 768px) {
body {
background-color: #fff;
}
}
```
6. 動畫效果:
使用CSS動畫可以使元素產生動態效果,例如:
```css
@keyframes myAnimation {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: green;}
}
div {
animation-name: myAnimation;
animation-duration: 4s;
}
```
以上只是CSS的一些基本用法和示例,CSS的功能非常強大,可以用於實現各種複雜的樣式和布局。建議查閱更多CSS教程和文檔以深入了解其用法。
以上就是【Css大全實例】的相關內容,敬請閱讀。