CSS----我不会的属性


规定背景图像的尺寸:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

定义和用法

background-size 属性规定背景图像的尺寸。

默认值: auto
继承性: no
版本: CSS3
JavaScript 语法: object.style.backgroundSize="60px 80px"

语法

background-size: length|percentage|cover|contain;

 

描述 
length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

 
percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

 
cover

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

背景图像的某些部分也许无法显示在背景定位区域中。

 
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。  

CSS white-space 属性

实例
规定段落中的文本不进行换行:

p
  {
  white-space: nowrap
  }

定义和用法

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值: normal
继承性: yes
版本: CSS1
JavaScript 语法: object.style.whiteSpace="pre"

可能的值

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

 

CSS3 transition 属性

  

定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

语法

transition: property duration timing-function delay;
描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

 

  • transition-property:
    transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
    请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
    默认值: all
    继承性: no
    版本: CSS3
    JavaScript 语法: object.style.transitionProperty="width,height"

    语法

    transition-property: none|all|property;
    描述
    none 没有属性会获得过渡效果。
    all 所有属性都将获得过渡效果。
    property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
    • transition-duration

      transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。

      默认值: 0
      继承性: no
      版本: CSS3
      JavaScript 语法: object.style.transitionDuration="5s"

       

      语法

      transition-duration: time;
      描述
      time

      规定完成过渡效果需要花费的时间(以秒或毫秒计)。

      默认值是 0,意味着不会有效果。

      • transition-timing-function
        transition-timing-function 属性规定过渡效果的速度曲线。

        该属性允许过渡效果随着时间来改变其速度。

        默认值: ease
        继承性: no
        版本: CSS3
        JavaScript 语法: object.style.transitionTimingFunction="linear"

        语法

        transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
        bezier(n,n,n,n);
        描述
        linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
        ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
        ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
        ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
        ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
        cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
      • transition-delay
        transition-delay 属性规定过渡效果何时开始。

        transition-delay 值以秒或毫秒计。

        默认值: 0
        继承性: no
        版本: CSS3
        JavaScript 语法: object.style.transitionDelay="2s"

        语法

        transition-delay: time;
        描述
        time

        规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。

         

        CSS3 text-shadow 属性

        定义和用法

        text-shadow 属性向文本设置阴影。

        默认值: none
        继承性: yes
        版本: CSS3
        JavaScript 语法: object.style.textShadow="2px 2px #ff0000"

        语法

        text-shadow: h-shadow v-shadow blur color;
        注释:text-shadow 属性向文本添加一个或多个阴影。
        该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
        描述 
        h-shadow 必需。水平阴影的位置。允许负值。  
        v-shadow 必需。垂直阴影的位置。允许负值。  
        blur 可选。模糊的距离。  
        color 可选。阴影的颜色。参阅 CSS 颜色值  

        CSS3 border-image 属性

        定义和用法

        border-image 属性是一个简写属性,用于设置以下属性:

        • border-image-source
        • border-image-slice
        • border-image-width
        • border-image-outset
        • border-image-repeat

        如果省略值,会设置其默认值。

        提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!

        默认值: none 100% 1 0 stretch
        继承性: no
        版本: CSS3
        JavaScript 语法: object.style.borderImage="url(border.png) 30 30 round"

         

        可能的值

         

        描述 
        border-image-source 用在边框的图片的路径。  
        border-image-slice 图片边框向内偏移。  
        border-image-width 图片边框的宽度。  
        border-image-outset 边框图像区域超出边框的量。  
        border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。  


        CSS3 box-shadow 属性

        定义和用法

        box-shadow 属性向框添加一个或多个阴影。

        提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!

        默认值: none
        继承性: no
        版本: CSS3
        JavaScript 语法: object.style.boxShadow="10px 10px 5px #888888"

        语法

        box-shadow: h-shadow v-shadow blur spread color inset;
        注释:box-shadow 向框添加一个或多个阴影。
        该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
        描述 
        h-shadow 必需。水平阴影的位置。允许负值。  
        v-shadow 必需。垂直阴影的位置。允许负值。  
        blur 可选。模糊距离。  
        spread 可选。阴影的尺寸。  
        color 可选。阴影的颜色。请参阅 CSS 颜色值。  
        inset 可选。将外部阴影 (outset) 改为内部阴影。  

        语法

        transform: none|transform-functions;
        描述 
        none 定义不进行转换。  
        matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。  
        matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。  
        translate(x,y) 定义 2D 转换。  
        translate3d(x,y,z) 定义 3D 转换。  
        translateX(x) 定义转换,只是用 X 轴的值。  
        translateY(y) 定义转换,只是用 Y 轴的值。  
        translateZ(z) 定义 3D 转换,只是用 Z 轴的值。  
        scale(x,y) 定义 2D 缩放转换。  
        scale3d(x,y,z) 定义 3D 缩放转换。  
        scaleX(x) 通过设置 X 轴的值来定义缩放转换。  
        scaleY(y) 通过设置 Y 轴的值来定义缩放转换。  
        scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
        rotate(angle) 定义 2D 旋转,在参数中规定角度。  
        rotate3d(x,y,z,angle) 定义 3D 旋转。  
        rotateX(angle) 定义沿着 X 轴的 3D 旋转。  
        rotateY(angle) 定义沿着 Y 轴的 3D 旋转。  
        rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。  
        skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。  
        skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。  
        skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。  
        perspective(n) 为 3D 转换元素定义透视视图。  








posted on 2018-01-22 17:30  最菜的后端想转前端  阅读(182)  评论(0编辑  收藏  举报

导航