css3的一些属性

时间：2021-02-20 08:27:42

以前还没有注意过css的一些属性，近期发现有一些样式很好用，现在整理一遍。

CSS3 动画属性

@keyframes : 规定动画

可以通过keyframes 改变一个块的样式当然这是要配合animation属性来结合的

@keyframes mymove（mymove必须定义动画的名称在）

{

0%   {top:0px; background:red; width:100px;}

100% {top:200px; background:yellow; width:300px;}

}

@-moz-keyframes mymove /* Firefox */

{

0%   {top:0px; background:red; width:100px;}

100% {top:200px; background:yellow; width:300px;}

}

@-webkit-keyframes mymove /* Safari 和 Chrome */

{

0%   {top:0px; background:red; width:100px;}

100% {top:200px; background:yellow; width:300px;}

}

@-o-keyframes mymove /* Opera */

{

0%   {top:0px; background:red; width:100px;}

100% {top:200px; background:yellow; width:300px;}

}

animation： 将动画与元素绑定

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name {规定需要绑定到选择器的 keyframe 名称

　　　　}

  • animation-duration （规定完成动画所花费的时间，以秒或毫秒计 time：规定完成动画所花费的时间。默认值是 0，意味着没有动画效果）
  • animation-timing-function{

规定动画的速度曲线

linear：动画从头到尾的速度是相同的

ease：默认。动画以低速开始，然后加快，在结束前变慢。

ease-in：动画以低速开始

ease-out：动画以低速结束

ease-in-out：动画以低速开始和结束

}

  • animation-delay{

规定在动画开始之前的延迟

time：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0

}

  • animation-iteration-count{

规定动画应该播放的次数

n：定义动画播放次数的数值

infinite：规定动画应该无限次播放

}

  • animation-direction{

规定是否应该轮流反向播放动画

normal：默认值。动画应该正常播放 ，

alternate：动画应该轮流反向播放

}

  • animation-play-state{

规定动画是否正在运行或暂停animation-play-state: paused|running;

paused：规定动画已暂停

running：规定动画正在播放

}

  • animation-fill-mode{

属性规定动画在播放之前或之后，其动画效果是否可见animation-fill-mode : none | forwards | backwards | both;

none：不改变默认行为

forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

both：向前和向后填充模式都被应用

}

div

{

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

}

CSS 背景属性

background在一个声明中设置所有的背景属性

background: #00FF00 url(bgimage.gif) red no-repeat fixed top;
  • background-color（规定要使用的背景颜色）
  • background-position（规定背景图像的位置）
  • background-size（规定背景图片的尺寸）
  • background-repeat（规定如何重复背景图像）
  • background-origin（规定背景图片的定位区域）
  • background-clip（规定背景的绘制区域）
  • background-attachment（规定背景图像是否固定或者随着页面的其余部分滚动）
  • background-image（规定要使用的背景图像）

CSS 边框属性

  • border：在一个声明中设置所有的边框属性。
  • border-bottom：在一个声明中设置所有的下边框属性
  • border-bottom-color：设置下边框的颜色
  • border-bootom-style：设置下边框的样式
  • border-bottom-width：设置下边框的宽度
  • border-color：设置四条边框的颜色
  • border-left：在一个声明中设置所有的左边框属性
  • border-left-color：设置左边框的颜色
  • .....还有border-top，border-right都是一样的效果之所上下左右边框的区别
  • outline：在一个声明中设置所有的轮廓属性
  • outline-color：设置轮廓的颜色
  • outline-style：设置轮廓的样式
  • outline-width：设置轮廓宽度
  • border-bottom-left-radius：定义边框左下角的形状
  • border-bottom-right-radius：定义边框右下角的形状
  • border-image：简写属性，设置所有 border-image-* 属性
  • border-image-outset：规定边框图像区域超出边框的量
  • border-image-repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
  • border-image-slice：规定图像边框的向内偏移
  • border-image-source：规定用作边框的图片
  • border-image-width：规定图片边框的宽度
  • border-radius：简写属性，设置所有四个 border-*-radius 属性
  • box-shadow：向方框添加一个或多个阴影

box属性

  • overflow-x：如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪
  • overflow-y：如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪
  • overflow-style：规定溢出元素的首选滚动方法
  • rotation：围绕由 rotation-point 属性定义的点对元素进行旋转
  • rotation-point：定义距离上左边框边缘的偏移点

color属性

  • color-profile：允许使用源的颜色配置文件的默认以外的规范
  • opacity：允许使用颜色配置文件渲染意图的默认以外的规范
  • rendering-intent：规定溢出元素的首选滚动方法

CSS 尺寸属性

  • height：{

　　设置元素高度

　　auto：默认。浏览器会计算出实际的高度

　　length：使用 px、cm 等单位定义高度

　　%：基于包含它的块级对象的百分比高度

　　inherit：规定应该从父元素继承 height 属性的值

}

  • max-height：设置元素的最大高度
  • max-width：设置元素的最大宽度
  • min-height:设置元素的最小高度
  • min-width:设置元素的最小宽度
  • width:设置元素的宽度

可伸缩框属性

  • box-align：{

规定如何对齐框的子元素box-align: start|end|center|baseline|stretch;

start：对于正常方向的框，每个子元素的上边缘沿着框的顶边放置，对于反方向的框，每个子元素的下边缘沿着框的底边放置

end：对于正常方向的框，每个子元素的下边缘沿着框的底边放置，对于反方向的框，每个子元素的上边缘沿着框的顶边放置

center：均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下

baseline：如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐

stretch：拉伸子元素以填充包含块

}

  • box-direction：规定框的子元素的显示方向
  • box-flex：规定框的子元素是否可伸缩
  • box-flex-group：将可伸缩元素分配到柔性分组
  • box-lines：规定当超出父元素框的空间时，是否换行显示
  • box-ordinal-group：规定框的子元素的显示次序
  • box-orient：规定框的子元素是否应水平或垂直排列
  • box-pack：规定水平框中的水平位置或者垂直框中的垂直位置

css 字体属性

  • color-profile：允许使用源的颜色配置文件的默认以外的规范
  • opacity：允许使用颜色配置文件渲染意图的默认以外的规范
  • rendering-intent：规定溢出元素的首选滚动方法

内容生成

  • content：与 :before 以及 :after 伪元素配合使用，来插入生成内容
  • conunter-increment：递增或递减一个或多个计数器
  • conunter-reset：创建或重置一个或多个计数器
  • quotes：设置嵌套引用的引号类型

Grid属性

  • grid-columns：规定网格中每个列的宽度
  • grid-rows：规定网格中每个列的高度

Hyperlink属性

  • grid-columns：规定网格中每个列的宽度
  • grid-rows：规定网格中每个列的高度

CSS 属性列表（List）

  • list-style：在一个声明中设置所有的列表属性
  • list-style-image：将图象设置为列表项标记
  • list-style-position：设置列表项标记的放置位置
  • list-style-type：设置列表项标记的类型
相关文章