css3新增的个性

1.选择器

   例如: :nth-child、:first-of-type、:last-of-type

2.边框与圆角

CSS3提供了更灵便的边框与圆角设置，如 borede-radius能够轻松地创立圆角成果

3.背景与突变

CSS3引入了背景突变性能，包含线性突变和径向突变，使背景设计更加活泼。

4.过渡

transition属性容许元素在状态扭转时平滑地过渡其属性值，如色彩、大小、地位等，提供简略的动画成果。


5.变换

transform属性能够对元素进行旋转、缩放、歪斜和平移等操作，加强了页面的交互性和视觉效果。

6.@media

@media 是 CSS3 媒体查问的一部分，它容许开发者依据设施的特定条件（如宽度、高度、方向等）来利用不同的 CSS 款式。这使得开发者可能创立响应式网站，即网站可能依据用户设施的不同（如桌面电脑、平板电脑、手机等）主动调整其布局和款式，以提供最佳的用户体验。 例子:能够应用 @media 查问来确保一个元素在小屏幕设施上显示为一个块级元素，而在大屏幕设施上显示为一个行内元素。这能够通过编写相似上面的 CSS 代码来实现：


7.flex弹性盒布局

  flex 是 CSS3 引入的一个新的布局模式，称为弹性盒子布局，它不须要应用浮动和定位等传统布局技术。

CSS3动画

CSS3的动画次要通过@keyframes规定和animation属性实现

  • @keyframes规定

    这个规定用于创立动画。你能够定义关键帧和过渡细节来管制动画的执行。例如，你能够设置动画开始时（0%或from）和完结时（100%或to）的款式，以及在动画过程中的其余关键帧的款式。

  • animation属性
    是所有动画属性的简写属性，用于将动画绑定到选择器。你能够指定动画的名称、动画的时长、动画的提早、动画的迭代次数、动画的播放方向等。

       上面是一个点单的动画事例