在CSS3中,有一些非常有用的新语法,其中最主要的是选择器。选择器是指用来匹配HTML标记的规则,以此决定哪些元素将受到CSS规则的影响。CSS3中引入了更多的选择器,其中一些值得一提:
/* 通用选择器 */ * { margin: 0; padding: 0; } /* 属性选择器 */ a[target="_blank"] { color: #FF0000; } /* 伪类选择器 */ a:hover { color: #0000FF; } /* 伪元素选择器 */ p::after { content: " - 接着一句话"; }
除了新的选择器,CSS3还引入了更多的属性和值,以便更轻松地控制文本和布局,其中一些最流行的属性包括:
/* 文本阴影 */ h1 { text-shadow: 2px 2px 8px #888888; } /* 边框半径 */ img { border-radius: 50%; } /* 转换 */ div { transform: rotate(45deg); } /* 过渡 */ button { transition: background-color 0.5s ease-out; }
最后,CSS3还提供了一种非常强大的方式来创建动态效果,称为动画。使用CSS3动画,您可以为页面中的对象创建很酷的动画效果,而无需使用JavaScript。以下是一个例子:
/* 关键帧 */ @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } /* 动画 */ div { animation: slidein 1s ease-out 1s; }
总的来说,CSS3提供了大量新功能和语法,让web开发者能够更轻松地创建可视化效果,并提供了更好的方式来处理文本和布局。