css属性列表

以下为最近总结的CSS属性列表，这里做下笔记

CSS属性组目录列表：

1 . 动画；2 . 背景；3 . 边框和轮廓；4 . Box盒子属性；5 . 可伸缩框；6 . 字体；7 . 表格属性；

8 . 文本属性；9 . 2D/3D 转换属性transform； 10 . 过渡属性transition；

11 . 用户界面属性（User-interface）；

下面具体介绍下各个属性

（1 . 动画）

【简介】

动画是使元素从一种样式逐渐变化为另一种样式的效果，并且可以改变任意多的样式任意多的次数

一般使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器

【兼容】

IE10、Firefox 以及 Opera 均支持动画属性，而Chrome 和 Safari 需要前缀 -webkit-

【主要内容】

1. CSS3的@keyframes 规则； 2. animation 属性及它所配置的6个动画属性

   ①animation-name动画名；②animation-duration动画持续时间；③animation-timing-function定时功能；

   ④animation-delay动画延迟；⑤animation-iteration-count动画迭代计数；⑥animation-direction动画方向

【详解】

具体我在后面文章http://570109268.iteye.com/admin/blogs/2410427里做了总结

（2 . CSS背景属性）

①background-attachment背景附件------设置背景图像是否固定或者随着页面的其余部分滚动；

常见用法：设置固定的背景图像，使图像不会随着页面的其他部分滚动

②background-clip背景修剪------规定背景的绘制区域；

③background-origin背景来源------规定 background-position 属性相对于什么位置来定位；

属性值：与背景修剪属性值相同，border-box边界框；padding-box填充盒；content-box内容盒

④background-size背景尺寸------规定背景图像的尺寸；

【详解】具体我在后面文章http://570109268.iteye.com/admin/blogs/2410426里做了总结

（3 . 边框和轮廓）

①outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

【兼容】IE8及其他主流浏览器均支持

注意：轮廓线不会占据空间，也不一定是矩形，outline 简写属性在一个声明中设置所有的轮廓属性

可以按顺序设置如下属性：outline-color，outline-style，outline-width

Html代码 收藏代码

注释：只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。

【拓展：轮廓偏移outline-offset 】

outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

兼容：除了IE外，其他主流浏览器均兼容

案例：在边框边缘之外 15 像素处的绘制轮廓

Css代码 收藏代码
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

②圆角属性

border-top-left-radius------定义边框左上角的圆角；border-top-right-radius------定义边框右上角的圆角；

border-bottom-left-radius------定义边框左下角圆角；border-bottom-right-radius------定义边框右下角圆角

③阴影属性

box-shadow------向方框添加一个或多个阴影

语法：box-shadow: h-shadow v-shadow blur spread color inset;

【兼容】IE9+及其他主流浏览器均支持

【IE兼容方案】①引入.htc文件；②使用IE的Shadow滤镜。

具体我在后面文章http://570109268.iteye.com/blog/2407672里做了总结

h-shadow 必需，水平阴影的位置。允许负值（正值向右，负值向左） 测试
v-shadow 必需，垂直阴影的位置。允许负值（正值向下，负值向上） 测试
blur 可选，模糊距离 测试
spread 可选，阴影的尺寸 测试
color 可选，阴影的颜色 测试
inset 可选，将默认的外部阴影 (outset) 改为内部阴影 测试
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0

（4 . Box盒子属性）

①overflow-x 水平滚动；

②overflow-y 垂直滚动；

③overflow-style 规定溢出元素的首选滚动方法（目前无浏览器支持）；

④rotation 围绕由rotation-point属性定义的点对元素进行旋转（目前无浏览器支持）；

⑤rotation-point 定义距离上左边框边缘的偏移点（目前无浏览器支持）；

（5 . 可伸缩框Flexible Box）

①box-align 规定如何对齐框的子元素

（6 . 字体属性）

font 在一个声明中设置所有字体属性
font-family 规定文本的字体系列
font-size 规定文本的字体尺寸
font-size-adjust 为元素规定 aspect 值（IE不支持）
font-style 规定文本的字体样式
font-variant 规定是否以小型大写字母的字体显示文本
font-weight 规定字体的粗细
①font-size-adjust -------为元素规定 aspect 值，为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height

 字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读

 举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读

②font-weight--------设置显示元素的文本中所用的字体加粗

  数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗

  属性值：normal---默认值，定义标准的字符；bold---定义粗体字符；bolder---定义更粗的字符；lighter---定义更细的字符；100--900定义由粗到细的字符

（7 . 表格属性）

目录：

①border-collapse合并边框；②border-spacing边框间距；③caption-side标题端；④empty-cells空白单元格

⑤table-layout表格布局；

以下为详解：

①border-collapse属性设置表格的边框是否被合并为一个单一的边框；

属性值：

separate（分离）默认值，边框会被分开。且不会忽略 border-spacing 和 empty-cells 属性

collapse（塌方）边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性

②border-spacing设置相邻单元格的边框间距离（仅用于“边框分离”模式）；

属性值：在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔

除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承

③caption-side规定表格标题的位置；

Html代码 收藏代码

这是一个标题

Adams	John
Bush	George

④empty-cells 规定是否显示表格中的空单元格上的边框和背景（仅用于“分离边框”模式）

属性值：

hide—不在空单元格周围绘制边框；show—默认值，在空单元格周围绘制边框

⑤table-layout 设置用于表格的布局算法（固定表格布局，自动表格布局）

属性值：automatic默认，列宽度由单元格内容设定；fixed列宽由表格宽度和列宽度设定。

固定表格布局：

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关

自动表格布局：

在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容

（8 . 文本属性）

关于文本属性详解，我在后面文章http://570109268.iteye.com/admin/blogs/2410569里做了总结

（9 . 2D/3D 转换属性transform）

关于2D/3D 转换详解，我在后面文章http://570109268.iteye.com/blog/2410700里做了总结

（10 . 过渡属性transition）

【兼容】IE10+及其他主流浏览器，Safari 支持hsck写法的 -webkit-transition

①transition 简写属性，用于在一个属性中设置四个过渡属性，主要包含

transition-property—过渡属性名称（设置过渡效果的 CSS 属性的名称，例宽高背景色等）

transition-duration—过渡时长

transition-timing-function—过渡时间函数

transition-delay—过渡延迟

案例：把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px

Html代码 收藏代码

把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。

注释：本例在 Internet Explorer 中无效

②transition-timing-function 规定过渡效果的时间曲线

语法：transition-timing-function: linear（匀速）|ease（慢快慢）|ease-in（慢速开始）|ease-out（慢速结束）|ease-in-out（慢速开始和结束）|cubic-bezier(n,n,n,n)（定义值，可能的值是 0 至 1 之间的数值）;

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 之间的数值。

（11）用户界面属性（User-interface）

①appearance（外观）设置元素外观，使元素看上去像标准的用户界面元素

【兼容】所有主流浏览器都不支持 appearance 属性，Firefox 支持替代的 -moz-appearance 属性，Safari 和 Chrome 支持替代的 -webkit-appearance 属性

例如：使div呈现按钮样式

Html代码 收藏代码

一些文本

属性值：appearance: normal（正常）|icon（图标）|window（窗口）|button（按钮）|menu（选项）|field（字段）;

②box-sizing 属性通过指定容器的盒子模型类型，达到不同的展示效果

属性值：content-box内容块；border-box盒模型

content-box的宽高为元素的内容框，在宽高外绘制外边距和边框；

border-box的宽高包含内边距和边框

适用场景：

例如百分比为宽度的容器设置padding时,容器的宽度就会像外扩展相应的padding值,要使宽度不被撑开,那么就是用box-sizing:border-box;会控制这种情况

具体案例详解我在后面文章http://570109268.iteye.com/admin/blogs/2410754里做了总结

③resize（调整）规定是否可由用户对元素的尺寸进行调整

注意：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll

【兼容】测试后IE不支持，chrome，Opera等均支持，Safari暂时未测

属性值：none（禁止调整尺寸）|both（宽高都可以调整）|horizontal（横/调整宽）|vertical（垂直/调整高）

案例：可以由用户调整 div 元素的大小

Html代码 收藏代码

resize 属性规定是否可由用户调整元素尺寸