CSS3新增的常用方法以及CSS常见属性整理

CSS 用于控制网页的样式和布局,而CSS3 是最新的 CSS 标准。

CSS3的规范仍在开发中,有些CSS3并不能完美兼容所有浏览器。

CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。

一些最重要CSS3模块如下:

  选择器  盒模型  背景和边框  文字特效

  2D/3D转换  动画  多列布局  用户界面

CSS3选择器

  添加了关系型选择器、属性选择器、伪元素选择器、伪类选择器等等新的选择器。

    可以更精准的筛选元素。CSS3选择器

CSS3边框

  CSS3中可以为元素创建圆角边框,添加阴影框。

  CSS3圆角

    语法:border-radius: 25px 25px 20px 20px;

     可以拆分为:左上 / 右上 / 右下 / 左下

      border-top-left-radius / border-top-right-radius / border-bottom-left-radius / border-bottom-right-radius

  CSS3盒阴影

    语法:box-shadow: 10px 10px 10px 10px #000;

              X  Y  s    r   color

      可加上inset属性,加上则为内部阴影,没加则为外部阴影

  CSS3图片边框

    语法:border-image: url(  ) 30 30 round;

CSS3背景

  css3中包含了新的背景属性,提供更大背景元素控制。

  background-image属性:元素的背景图片

    语法:background-image: url(),url()可连接多个图片地址,如果前一个地址错误或者无法加载,会加载后面的地址。

      也可以为不同的图片设置不同的属性:background-image: url() right bottom no-repeat ,  url() left top repeat;

  backrgound-size属性:元素的背景图片的大小

    语法:background-size: 80px 60px;

  background-Origin属性:可以指定背景图片的位置区域

    语法:background-Origin: padding-box;内填充

                  border-box;边框

                  content-box;内容

  background-clip属性:对图片从指定位置进行裁剪

    语法:background-clip: 值同上;

  在文字中添加背景图:

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

CSS3 Flex Box 弹性盒子

  弹性盒子是CSS3的一种新的布局模式

    弹性盒子由弹性容器和弹性子元素组成。

    弹性容器内包含了一个或多个弹性子元素。

  用法:

    display:flex;     //inline-flex

    flex-direction: row | row-reverse / column | column-reverse

          主轴以x为准,|取反  主轴以y为准,|取反

    flex-wrap: 默认no-wrap不换行,会压缩;

        wrap换行  warp反向换行排列

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

        基于主轴的对齐方式

    基于交叉轴的对齐方式:

    适用于单行的:align-items:flex-start / flex-end / center / baseline / stretch

    适用于多行的:align-content:flex-start / flex-end / center / space-between / space-around / stretch

      如果只有一行是没有区别的

    order: flex中子项排序,数值小的排序在前。

    align-self :项目在交叉轴的对齐方式:

          flex-start交叉轴最顶  flex-end最底

          center  baseline  stretch  比前两者优先级更高。

    flex: 子项,以下控制宽

      flex-grow : ; 伸,会按照写的比例来瓜分剩下的空间,写在多个标签内会一起计算比例,不写默认值为0

      flex-shrink : ; 缩,按照比例缩小按比例分配的值

      flex-basis : ;基础宽,可以认为即width。最小宽度,width为最大宽度。

      以加权值来计算,在容器宽不足以容纳子项,以每个项目的宽*比例值相加后,按照比例缩小。

  CSS的过渡属性  transition  只要状态发生改变,就会触发过渡

      transition-property--规定设置过渡效果的 CSS 属性的名称。all 为全部属性

      transition-duration--规定完成过渡效果需要多少秒或毫秒。

      transition-timing-function--规定速度效果的速度曲线。

      transition-delay--定义过渡效果何时开始。

  CSS的动画属性  animation  必须使用@keyframes

      @keyframes--定义关键帧动画,名字随便取,调用的时候用这个名字即可

      animation-name--动画的名字,必须与@keyframes配合使用

      animation-duration--动画的时间,从0 - 100 的时间

      animation-timing-function--动画的方法:

steps(<integer>[, [ start | end ] ]?)
        step-start:等同于 steps(1, start)
        step-end:等同于 steps(1, end)
cubic-bezier(<number>, <number>, <number>, <number>)

      animation-delay--动画的延迟时间,默认值是0s

      animation-iteration-count--动画的循环次数,默认值是一次infinite:无限循环

      animation-direction--必须建立在循环的基础之上的

normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行

  CSS转换属性  transform  3D转换中元素移动坐标轴也会移动

      CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。

    rotate旋转

      rotateX()  rotateY()  rotateZ()  rotate3d(x,y,z,deg)

        元素的旋转,旋转以后,元素的坐标轴也跟着发生了旋转,所以会导致先转和后转的结果会不一样

    scale伸缩

      scale()  scelex()  scaley()  scelez()  scale3d(x,y,z)

        当你图片伸缩的时候,是伸缩的空间坐标轴,并不是图片的大小,造成了一个视觉差的效果

    skew倾斜

      skewx()  skewy()

        倾斜是倾斜坐标轴,并且会将坐标轴进行拉伸

    translate移动

      translatex()  transelatey()  translatez()  translate3d(x,y,z)

        相对于元素本身发生的偏移

原文地址:https://www.cnblogs.com/yeming980912/p/11240370.html

时间: 2024-10-12 17:26:32

CSS3新增的常用方法以及CSS常见属性整理的相关文章

css常见属性

### css常见属性- color:red/rgb(255,0,0)/#f00; + 注意,如果有a链接,必须在a链接中设置字体的颜色:在外面设置a链接中的字体颜色,无效:- font:400 14px/28px "宋体 微软雅黑": + font-weight:400; bold->700; + font-size:14px; + line-height:28px; + font-family:"宋体"- background:url("相对地址

css常见属性和属性值

CSS常见属性和属性值 字体属性 Font-family 字体族科  宋体|微软雅黑 Font-size  字体大小 Font-style  字体样式  normal|italic(倾斜)|oblique(斜体) 不是所有的字体都支持倾斜 如果没有倾斜那么你就必须使用斜体来代替倾斜 Font-weight 字体加粗  normal |bold(加粗)|lighter(变细) Font-variant 字体变形   normal|small-caps Font:[字体风格] [字体变形] [字体加

CSS基础【2】:CSS常见属性

CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weight 作用:规定文字粗细 格式:font-weight: bold; 单词取值: bold 加粗 bolder 比加粗还要粗 lighter 细线, 默认就是细线 数字取值: 100 - 900之间整百的数字 font-size 作用:规定文字大小 格式:font-size: 30px; 取值:px

玩转HTML5+跨平台开发[9] CSS基础-CSS常见属性

文字属性 常用文字属性 属性 作用 格式 取值 快捷键 注意点 font-style 规定文字样式 font-style: italic; normal : 正常的, 默认就是正常的 italic : 倾斜的 fs font-style: italic; fsn font-style: normal;   font-weight 规定文字粗细 font-weight: bold; 单词取值: bold 加粗 bolder 比加粗还要粗 lighter 细线, 默认就是细线 数字取值: 100-9

CSS 常见属性

1 .transform img:hover {  transform:scale(1.2);} /*图片放大显示*/ 实现效果

初学css常用属性整理

CSS常用样式属性 整理了一些之前刚学CSS时的一些基本的样式属性,另外在使用时还要注意一下CSS里 选择符的权重(id-#=100 , class-.=10 直接指定标签=1). 字体.颜色.背景属性 font-size  ------字体大小(**px,**em) font-family       ------字体类型(微软雅黑,黑体,楷体等) font-weight      ------字体粗细(bold粗体,也可直接输入100-900数值) font-style         --

CSS position属性整理详解

在css布局中position的使用非常广泛.在一些面试题目中也会常见到position的问题.所以在这篇博客里面整理一下position属性的使用,在以后的深入学习中还会在补充的. 1.position有哪些属性? static:所以元素的默认定位是position:static,这意味着元素没有被定位,元素出现在正常流中. relative:生成相对定位的元素,相对于其正常位置定位,还占有原来的位置,元素通过top,right,left,bottom属性进行规定. absolute:生成绝对

css3新增功能

CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 后代选择器 E F 子选择器 E>F 相邻兄弟选择器 E+F 通用兄弟选择器 E~F 1.3 属性选择器 E[attr] 选择具有att属性的E元素. E[attr="val"] 选择具有att属性且属性值等于val的E元素. E[attr~="val"] 选择具

CSS3新增属性css版

最近学习CSS3,以下CSS文件中的内容来自CSS手册. 可直接调用此CSS查看效果. 若有遗漏,待发现后补充进去. @charset "utf-8"; /* ------------------------- 此文档收集并介绍CSS3新增属性 ------------------------ /*----------border-color--------- 设置对象边框的颜色. --------------------- 浏览器支持:Firefox3.0+ ------------