CSS3是最新的CSS规范,拥有许多强大的样式属性,下面是一些常见的样式属性及用法:
/* 选择器 */
p {
color: #333;
font-size: 16px;
font-weight: bold;
}
/* 颜色 */
color: #333; /* 文字颜色 */
background-color: #fff; /* 背景颜色 */
/* 字体 */
font-size: 16px; /* 字体大小 */
font-family: Arial, sans-serif; /* 字体类型 */
font-weight: bold; /* 字体加粗 */
text-decoration: underline; /* 下划线 */
text-transform: uppercase; /* 文本大写 */
text-align: center; /* 文本居中 */
/* 边框 */
border: 1px solid #333; /* 边框大小、样式、颜色 */
border-radius: 5px; /* 圆角边框 */
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); /* 盒子阴影 */
/* 背景 */
background-image: url(bg.jpg); /* 背景图 */
background-repeat: no-repeat; /* 背景不重复 */
background-size: cover; /* 背景铺满 */
/* 渐变 */
background: linear-gradient(#333, #999); /* 线性渐变 */
background: radial-gradient(#333, #999); /* 径向渐变 */
/* 动画 */
animation: fade-in 1s ease-in-out; /* 淡入动画 */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* 过渡 */
transition: all 1s ease-in-out; /* 全部属性过渡 */ 以上是CSS3常见的样式属性及用法,它们可以让网页设计更加丰富多彩,提高用户体验。