CSS3总结(干货)

Posted paradise-zzz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3总结(干货)相关的知识,希望对你有一定的参考价值。

1、css3中好用的选择器  

:target       //突出显示活动的html

::after / ::before{content:" ";}  //content必须有,若无内容,用空格占位

2、文字

  a.导入字体: @font-face

  b.文字阴影:text-shadow

  ps:相关css

    a.white-space: nowrap;    //段落文本不换行

    b.text-overflow:ellipsis;     //文本修剪(ellipsis变为省略号)

    c.word-break: break-all    //断字点换行

3、边框

  a.border-radius    //圆角

  b.box-shadow       //阴影

    制作三角形方法   

1   #div1{
2             width: 0;
3             border-width: 50px;
4             border-style: solid;
5             border-left-color: #f00;
6             border-top-color: #0f0;
7             border-right-color: #ff0;
8             border-bottom-color: #00f;
9         }

4、背景

  a.background-clip    //对背景图片进行切割,不完整背景(border-box, padding-box, content-box)

  b.background-origin   //对背景图片设置起始点,完整背景(border-box, padding-box, content-box)

5.弹性盒模型

  a.box-flex        //在一个div中占几份

  b.box-ordinal-group    //div的显示次序(包含在含有css display:box;中)

  c.flex-direction       //元素排列顺序【row:主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。row-reverse:对齐方式与row相反。column:主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。column-reverse:对齐方式与column相反。】(与display:flex;同时使用)

6、新旧弹性盒模型比较

  a.在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box:

    新版弹性盒模型:flex:display : flex

    老版弹性盒模型:box : display : -webkit-box

  b.使用box-orient 定义盒模型的主轴方向

    新版:flex:flex-direction: row / column

    老版:box : -webkit-box-orient:

          horizontal 水平显示

           vertical 垂直方向  

  c.box-direction 元素排列顺序

    新版:flex : flex-direction: row-reverse / column-reverse;

    老版:box : -webkit-box-direction:

         normal 正序

         reverse 反序

  d.box-pack 主轴方向空闲空间设置

     新版:flex : justify-content : flex-start / flex-end / center / space-between / space-around;

     老版:box : -webkit-box-pack

        start 所有子元素在盒子左侧显示,富裕空间在右侧

        end 所有子元素在盒子右侧显示,富裕空间在左侧

        center 所有子元素居中

        justify 富裕空间在子元素之间平均分布

  e.box-align 侧轴方向方向空闲空间设置

    新版:flex : align-items : flex-start / flex-end / center / baseline

    老版:box : -webkit-box-align

        start  所有子元素居顶

        end 所有子元素居底

        center 所有子元素居中

  f.box-flex 定义盒子的弹性空间

    新版:flex : flex-grow

    老版:box : -webkit-box-flex

  g.box-ordinal-group 设置元素的具体位置

    新版:flex : order

    老版:box : -webkit-box-ordinal-group

 

  ps:css3兼容:

      -webkit-

      -moz-

      -ms-

      -o-

      属性

7、transform常用用法

  transform: rotate(45deg);  //2D旋转

  transform: translate(x, y);  //2D移动

  transform:scale(x,y):    //2D缩放

  transform:skew(xdeg,ydeg):  //2D扭曲(平行四边形)

  transform:rotate(x,y,z)      //需要perspective属性改变视图(视角)

8、translation

  translation: 哪个属性过度(eg:width) 过渡完成需要时间 速度 何时开始

 

 


以上是关于CSS3总结(干货)的主要内容,如果未能解决你的问题,请参考以下文章

前端开发干货一箩筐:css3D 的魅力

#yyds干货盘点#愚公系列2023年02月 .NET/C#知识点-程序运行计时的总结

干货CSS3 卡牌旋转滑动效果

css3干货

关于CSS3的代码总结(部分)

干货|CSS3自动打字动画,让你的文字动起来!