以前还没有注意过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:设置列表项标记的类型
												

css3的一些属性的更多相关文章

  1. CSS3外轮廓属性

    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...

  2. 学习笔记:CSS3的filter属性

    CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...

  3. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  4. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  5. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. css3 的box-sizing属性理解

    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

  8. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  9. CSS3的box-sizing属性

    盒模型的宽度,在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内 W3C标准中的盒模型宽度为内容宽度,不包括内边距paddin ...

  10. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 学习iOS开发的前言

    一.什么是iOS 要想学习iOS开发,首先要搞清楚什么是iOS.iOS其实是一款操作系统,就像平时我们在电脑上用的XP.Win7,都是操作系统. 那什么是操作系统呢?操作系统其实是一种软件,是直接运行 ...

  2. ELMAH+MVC4+SQLite 错误日志

    任何程序我想无论是在调试开发阶段还是上线运营阶段,都能够使人“放心”,不要出什么意外,也不要玩什么心跳:那就需要比较到位和及时的异常与错误日志模块. 本文将简要描述ELMAH.MVC4与SQLite这 ...

  3. const 用在函数后

    类的成员函数后面加 const,表明这个函数不会对这个类对象的数据成员(准确地说是非静态数据成员)作任何改变.C++支持常量性不同的重载,例如下面的GetData函数. #include " ...

  4. C++箴言:避免构造或析构函数中调用虚函数

    如果你已经从另外一种语言如C#或者Java转向了C++,你会觉得,避免在类的构造函数或者析构函数中调用虚函数这一原则有点违背直觉.但是在C++中,违反这个原则会给你带来难以预料的后果和无尽的烦恼. 正 ...

  5. C#实现发送和接收pop3邮件方法

    必须引入Interop.jmail.dll应用 /// <summary>    /// 收取新邮件.不删除老邮件.收取邮件后写入数据库    /// </summary>   ...

  6. COM组件简介

    面向对象的思想难以适应这种分布式软件模型,于是组件化程序设计思想得到了迅速的发展. 按照组件化的程序设计的思想,复杂的应用程序被设计成一些小的,功能单一的组件模块,这些组件模块可以运行在同一台机器上, ...

  7. spring mvc框架 遇到的问题

    web.xml配置文件代码: <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...

  8. hadoop之hdfs学习

    简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Go ...

  9. HiveQL与SQL区别

    转自:http://www.aboutyun.com/thread-7327-1-1.html 1.Hive不支持等值连接 SQL中对两表内联可以写成:select * from dual a,dua ...

  10. day5_python学习笔记_chapter6_字符串列表元组

    1. 序列:seq[n], seq[x:y], seq * n序列重复n次,切片, 序列翻转 s=”abcde", s[::-1]="edcba" 内建函数:1. 类型转 ...