当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS3知识点总结

CSS3知识点总结

2020年07月14日  | 移动技术网IT编程  | 我要评论

1.background-origin: 规定背景图片的定位区域

值 描述
padding-box 背景图像相对内边距定位（默认值）
border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】
content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】

2.background-clip： 规定背景的绘制区域

值 描述
border-box 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】(默认值)
padding-box 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
content-box 背景被裁切到内容区域【将背景图片在内容区域显示】

3.background-size： 规定背景图片的尺寸

值 描述
cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

4.边框、阴影

属性 描述
box-shadow 盒子阴影
border-image 边框图片
text-shadow 文本阴影

5.CSS3新特性之选择器

1）属性选择器

选择器 描述
[属性名=值] 匹配属性等于值
[属性名] 匹配对应的属性
[属性名^=值] 以值开头
[属性名*=值] 包含值
[属性名$=值] 以值结束

2）结构伪类选择器

选择器 描述
:first-child 选中父元素中第一个子元素
:last-child 选中父元素中最后一个子元素
:nth-child(n) 选中父元素中正数第n个子元素
:nth-last-child(n) 选中父元素中倒数第n个子元素

备注：n 的取值大于等于0
      n 可以设置预定义的值
            odd[选中奇数位置的元素]  
            even【选中偶数位置的元素】

      n 可以是一个表达式：
             an+b的格式

3）其他选择器：

选择器 描述
:target  被锚链接指向的时候会触发该选择器
::selection     当被鼠标选中的时候的样式
::first-line 选中第一行
::first-letter 选中第一个字符

6.渐变

值 描述
linear-gradient 线性渐变
radial-gradient 径向渐变

备注：线性渐变：
         1. 开始颜色和结束颜色
         2. 渐变的方向
         3. 渐变的范围

       background-image:  linear-gradient(
                to right,
                red,
                blue
        );
         表示方向：
             1. to + right | top | bottom | left 
             2. 通过角度表示一个方向
               0deg [从下向上渐变] 
               90deg【从左向右】

       /* 径向渐变 */
            background-image: radial-gradient(
                 100px at center,
                 red,
                 blue
            );

7.2D转换、3D转换 transform

值 描述
translate 位移
rotate 旋转
scale 缩放
skew 倾斜

备注: perspective：透视，transform-style:preserve-3d 将平面图形转换为立体图形

8.过渡 transition

属性 描述 
transition-property 设置对应属性参与到过渡动画中
transition-duration 设置过渡时间
transition-delay 设置过渡延时执行时间
transition-timing-function 设置过渡的速度类型

备注：参考https://www.cnblogs.com/afighter/p/5731293.html

9.动画 animation

/* 定义动画集 */
@keyframes  rotate {
  /* 定义开始状态  0%*/
     from {
        transform: rotateZ(0deg);
     }

   /* 结束状态 100%*/
      to {
        transform: rotateZ(360deg);
         }
}
属性 描述 
animation-name 设置@keyframes 动画的名称
animation-duration 设置动画时间
animation-interation-count 设置动画执行次数。默认是 1
animation-timing-function 设置动画速度类型。默认是 "ease"
animation-direction 动画是否在下一周期逆向地播放。默认是 "normal"
animation-fill-mode 设置对象动画时间之外的状态
animation-play-state 设置动画是否正在运行或暂停。默认是 "running"

10.CSS3新特性之网页布局

属性 描述 
flex-direction 设置伸缩盒子主轴方向
justify-content 设置元素在主轴的对齐方式
align-items 设置元素在侧轴的对齐方式 
flex-wrap 设置元素是否换行显示
align-content 设置元素换行后的对齐方式
flex 在子元素上设置在父元素中所占的比例

 

本文地址：https://blog.csdn.net/bboyjoe/article/details/85933575

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网