[分享]css3所有样式

CSS3是一种新的CSS版本，引入了许多新的样式来增强网页的外观和交互性。以下是CSS3中所有可用的样式。/ 文本及字体样式 / color: 333; / 文本颜色 / textdecoration...

CSS3是一种新的CSS版本，引入了许多新的样式来增强网页的外观和交互性。以下是CSS3中所有可用的样式。

/* 文本及字体样式 */
color: #333; /* 文本颜色 */
text-decoration: underline; /* 下划线 */
font-size: 16px; /* 字体大小 */
font-family: Arial, sans-serif; /* 字体种类 */

/* 盒模型相关样式 */
margin: 10px; /* 外边距 */
padding: 10px; /* 内边距 */
border: 1px solid #ccc; /* 边框 */
border-radius: 5px; /* 圆角边框 */
box-shadow: 10px 10px 5px #888; /* 盒阴影 */

/* 背景相关样式 */
background-color: #ccc; /* 背景颜色 */
background-image: url("bg.jpg"); /* 背景图片 */
background-repeat: repeat-x; /* 背景图片水平重复 */
background-position: center top; /* 背景图片位置 */

/* 列表样式 */
list-style-type: none; /* 无序列表无点号 */
list-style-image: url("list.png"); /* 有序列表自定义图片 */

/* 超链接样式 */
a:link {color: blue;} /* 正常未访问链接颜色 */
a:visited {color: purple;} /* 已访问链接颜色 */
a:hover {color: red;} /* 鼠标悬停链接颜色 */

/* 表格样式 */
table {border-collapse: collapse;} /* 表格边框合并 */
td {border: 1px solid #ccc;} /* 单元格边框 */

/* 动画效果 */
transition: width 2s ease-in-out; /* 宽度变化动画 */
animation: myanimation 3s infinite; /* 自定义动画 */

/* 媒体查询 */
@media only screen and (max-width: 768px) {
   body {background-color: yellow;} /* 在768像素以下屏幕上背景色变为黄色 */
} 

以上只是CSS3中的一些可用样式，还有很多其他的样式。CSS3带来了更多的样式和功能，可以让网页变得更加美观和有趣。