动画属性(适用于IE10及以上)
animation
name(none | name)
duration(时间 2s)
timing-function(时间曲线)
delay(延迟/快进 2s)
iteration-count(播放次数 2 | infinite)
direction(轮流播放 normal | alternate | reverse | alternate-reverse);
animation-fill-mode : none | forwards | backwards | both;(动画外状态)
animation-play-state: paused|running;(动画状态)
keyframes 可以只有to,可以没有100%和0%
时间曲线 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
@keyframes mymove{
from {top: 0px;height: 0px;width: 0px;}
to {top: 200px;height: 100px;width: 100px;}
}
/*第二种写法*/
@keyframes mymove{
0% {top: 0px;height: 0px;width: 0px;}
100% {top: 200px;height: 100px;width: 100px;}
}
@keyframes move
{
50%
{
width:1000px;
}
}
div{
background: red;position: absolute;
animation:mymove 5s ease 1s infinite alternate both;
}
/*暂停动画*/
div{
animation-play-state:paused;
}
背景属性
background:
color(#000 | red | rgb(0,0,0) | transparent)
background-image:<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
position(位置) /size(length | percentage | cover | contain)
repeat(repeat | repeat-x | repeat-y | no-repeat)
attachment(定位 scroll | fixed)
新属性IE9及以上
origin(相对点 padding-box | border-box | content-box)
clip(剪裁 border-box | padding-box | content-box)
size
background-blend-mode 属性定义了背景层的混合模式(图片与颜色)(ie不支持)。
filter(ie不支持)
ie滤镜(https://www.jb51.net/css/71829.html)
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
//多张背景图(ie9及以上)
background:url("haoroomsCSS1_s.jpg") 0 0/20px 20px no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
//渐变(ie10及以上)
linear-gradient(45deg, yellow 10%, green 20%)
body{
background: #00FF00 url(bgimage.gif) no-repeat fixed top/20px 20px content-box border-box;
}
边框属性
border:
width(thin | medium | thick | length)
style
color
p{
border:5px solid red;
}
//border-style:hidden
<style>
table{
margin: 100px 100px;
border: 1px none skyblue;
border: 1px solid skyblue;
border: 1px hidden skyblue;
border-collapse: collapse;/*相邻边被合并*/
}
td{
border: 1px solid pink;
width: 100px;
height: 100px;
}
</style>
<body>
<table>
<tr><td>111</td><td>111</td><td>111</td><td>111</td></tr>
</table>
</body>
outline:(IE8及以上)
color:同上
style:同上
width: thin | medium | thick | length
p{
outline:#00FF00 dotted thick;
}
border-image:(IE11及以上)
source(url | none)
slice(裁剪偏移量 number | % | fill)分割图像的偏移量
width(number 倍数 | % | auto)四角图像区域的宽度
outset(超出量 length | number)边框样式的放大量 Opera 不支持
repeat(stretch | repeat | round)Opera 不支持
div
{
border-image:url(border.png) 30 30/0.5 0.5 round;
}
边框圆角(ie9及以上)
border-radius: 1-4 length|% / 1-4 length|%;
div{
border-radius: 2em 1em 4em / 0.5em 3em;
}
虽然各大浏览器都支持border-radius,但是在某些细节上,实现都不一样。当四个角的颜色、宽度、风格(实线框、虚线框等)、单位都相同时,所有浏览器的渲染结果基本一致;一旦四个角的设置不相同,就会出现很大的差异。比如,下面这段代码在不同的浏览器中,渲染结果就相差很大。
border-color: black;
border-style: solid dashed;
border-width: 1px 2px 3px;
border-top-color: red;
border-radius: 5%;
另外,并非所有浏览器,都支持将圆角半径设为一个百分比值。
因此,目前最安全的做法,就是将每个圆角边框的风格和宽度,都设为一样的值,并且避免使用百分比值。
盒子阴影(ie9及以上)
boxShadow 属性把一个或多个下拉阴影添加到框上,接受逗号分隔的多个写法。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
-o- | -moz- | -webkit- | box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
Box 属性
overflow-x: visible | hidden | scroll | auto;
overflow-y: visible | hidden | scroll | auto;
div{
overflow-x:hidden;
}
透明度
div{
opacity:0.5;
//ie8及以下
filter:Alpha(opacity=50);
}
opacity: value|inherit;
尺寸
max-length/height/width/min-height/max-width/min-width: auto ; length(使用 px、cm 等单位定义高度) ; % ( 基于包含它的块级对象的百分比高度) | auto | none
弹性盒模型
新(兼容ie10 ie11以上)
-ms- | -webkit- | -moz- | flex
flex-grow: number
flex-shrink: number
flex-basis: number|auto
flex-flow: flex-direction flex-wrap
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
flex-direction: row|row-reverse|column|column-reverse
flex-wrap: nowrap|wrap|wrap-reverse
align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。
align-content
属性对齐主轴上的各项(水平)。容器内必须有多行的项目,该属性才能渲染出效果。
ie11以上兼容,支持webkit前缀
align-items
设置了flex容器的对齐方式。使用每个flex对象元素的 align-self 属性可重写 align-items 属性。
ie11以上兼容,支持webkit前缀
align-self
定义flex子项单独在侧轴(纵轴)方向上的对齐方式。可重写灵活容器的 align-items 属性。
ie11以上兼容,支持webkit前缀
justify-content
用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
使用 justify-content 属性对齐交叉轴上的各项(垂直)。
ie11以上兼容,支持webkit前缀
order
设置或检索弹性盒模型对象的子元素出现的順序。如果元素不是弹性盒对象的元素,则 order 属性不起作用。
order: number|initial|inherit;
ie11以上兼容,支持webkit前缀
旧版(ie10及以上)
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
box-direction: normal | reverse(反向) | inherit;
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
box-flex: 1;
box-flex属性指定box的子元素是否灵活或固定的大小。
随着box收缩和增长,元素是否灵活的收缩或增长。每当有额外的空间,在box里,元素灵活的扩大来填补这一空间。
.box
{
display:-ms-flexbox; /* Internet Explorer 10 */
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-ms-flex-order:1; /* Internet Explorer 10 */
-moz-box-ordinal-group:1; /* Firefox */
-webkit-box-ordinal-group:1; /* Safari and Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-ms-flex-order:2; /* Internet Explorer 10 */
-moz-box-ordinal-group:2; /* Firefox */
-webkit-box-ordinal-group:2; /* Safari and Chrome */
box-ordinal-group:2;
}
box-ordinal-group: integer;
指定一个box的子元素的显示顺序。具有较低值的元素显示在那些具有较高的值的元素之前。同一组值的元素显示顺序取决于他们源顺序。
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
box-orient
ie不支持
指定一个box子元素是否应按水平或垂直排列。
水平方向的box里的子元素是由左到右显示,垂直方向的box显示从上到下排列。然而,box-direction方向可由 box-ordinal-group属性改变这个顺序。
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
box-pack属性指定一个box的子元素时,被置于该框的子元素小于该框。此属性指定横向框的水平位置,垂直位置的垂直框。
字体属性(可继承)
.font{
font: italic small-caps bold 100px/60px arial, sans-serif;
}
font:
style(normal | italic | oblique(倾斜))
variant(normal | small-caps)
weight(normal | bold | bolder | lighter | 100-900)
size(xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | length | %)/line-height(normal | number(此数字会与当前的字体尺寸相乘来设置行间距) | length | %)
family(family-name,generic-family)
font-variant:small-caps | normal 小型大写字母
@font-face(自定义字体)
内容生成(ie8及以上)
1.插入纯文字
content : ”插入的文章”,或者 content:none 不插入内容
#html
<h1>这是h1</h1>
<h2>这是h2</h2>
#css
h1::after{
content:"h1后插入内容"
}
h2::after{
content:none
}
2.嵌入文字符号
可以使用content属性的 open-quote 属性值和 close-quote 属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote 用于添加开始的文字符号,close-quote 用于添加结束的文字符号。
#html
<h1>这是h1</h1>
<h2>这是h2</h2>
<q>This is a <q>big</q> quote</q>
#css
q:lang(en)
{
quotes: '"' '"' "'" "'";(yes)
}
h1{
quotes:"(" ")"; /*利用元素的quotes属性指定文字符号*/
}
h1::before{
content:open-quote;(ie9+)
}
h1::after{
content:close-quote;
}
h2{
quotes:"\"" "\""; /*添加双引号要转义*/
}
h2::before{
content:open-quote;
}
h2::after{
content:close-quote;
}
3.插入图片(ie9+)
#html
<h3>这是h3</h3>
#css
h3::after{
content:url("URL");
}
4.插入元素的属性值
#html
<a href="http:///www.ido321.com">这是链接</a>
#css
a:after{
content:attr(href);
}
5.计数器
counter()
counter方法可以接收两个参数。第一个是计数器的名字,必填;第二个是计数器的样式,也就是list-style-type,其支持的关键字值,就是list-style-type支持的那些值,比如disc | circle | square之类等等。
content: counter(n)
content: counter(m, circle)
counters()
counters方法主要用于嵌套计数,可以接收三个参数。第一个是计数器的名字,必填;第二个是字符串,用于嵌套计数的分隔符,如1.1中的“.”;第三个参数是计数器的样式,与counter一样。其中,前两个参数为必填
content: counters(n, '-');
body
{
counter-reset:section;
}
h1
{
counter-reset:subsection;
}
h1:before
{
counter-increment:section;
content:"Section " counter(section,upper-alpha) ". ";
}
列表(可继承)
ul{
list-style:square inside url('/i/arrow.gif');
}
list-style
list-style-type
list-style-position(inside | outside)
list-style-image(url | none)
list-style-type IE8及以下不支持属性值 “decimal-leading-zero”、“lower-greek”、“lower-latin”、“upper-latin”、“armenian”、“georgian” 或 “inherit”。
边距
margin/padding :auto | length | %
定位属性
bottom:auto | length | %
clear:left | right | both | none
clip: rect(top,right,bottom,left) | auto
cursor:
display:
Internet Explorer 8 (以及更高版本)支持属性值 “inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row-group”、以及 “inherit”。
float:left | right | none
overflow: hidden | scroll | auto | visible
position:absolute | relation | fixed(ie9及以上) | static
vertical-align:
visibility:hidden | visible | collapse(在表格中删除一行或一列,给其他内容使用,ie8及以上)
z-index: auto | number
表格属性
border-collapse:separate(边框分离) | collapse(yes)
border-spacing:length(水平) length(垂直)(ie8及以上,yes)
caption-side:top | bottom(ie8及以上,yes)
empty-cells: hide | show(ie8及以上,yes)
table-layout:automatic | fixed(no)
2D/3D转换
坐标轴:x向下为正方向,y向右为正方向
transform
div{
transform:rotate(7deg);
}
transform-origin: x-axis(left | right | center | length | %) y-axis(left | right | center | length | %) z-axis(length)
div{
transform: rotate(45deg);
transform-origin:20% 40%;
}
transform-style: flat|preserve-3d;
如何在 3D 空间中呈现被嵌套的元素。
div{
transform: rotateY(60deg);
transform-style: preserve-3d;
}
perspective: number|none
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
-moz-perspective: 500; /* Safari 和 Chrome */
}
perspective-origin: x-axis(left | right | center | length | %) y-axis(left | right | center | length | %)
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari 和 Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
-moz-perspective-origin: 10% 10%;
}
backface-visibility: visible|hidden
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
过渡属性(ie10及以上)
transition: property(属性名:none | all | property,property)
duration(时间 2s)
timing-function(速度曲线 )
delay(延迟 2s);
div{
width:100px;
transition: width 2s,height 1s;
}
用户界面属性
box-sizing:border-box | content-box;(ie8及以上)
div{
box-sizing:border-box;
}
outline-offset: length(ie不支持)
resize: none|both|horizontal|vertical;(Firefox 4+、Safari 以及 Chrome 支持 resize 属性)
关键字:
initial :将属性设置为默认值,ie不支持,但是可能并不会按预期工作,比如display默认值为inline,及使其元素是块级元素
inherit ie8+
auto
all (初始化,ie和opera不支持)
currentColor(color的支持)
tranparent
div {
background-color: yellow;
color: red;
all: initial;
}
all: initial(修改所有元素属性或父元素的值为其初始化值)| inherit(修改所有元素属性或父元素的值为其父元素值)| unset( 修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值);
文本属性(yes)
color:red | #fff | rgba(0,0,255,1);实际上是设置元素的前景色,扩展到边框颜色
direction: rtl | ltr
letter-spacing: normal | length
line-height:number | normal | length | %
text-align: left | right | center | justify
text-decoration:overline | line-through | underline | none(no)
text-indent: length | %
text-transform:uppercase(仅有大写字母) | lowercase(仅有小写字母) | capitalize(大写字母开头) | none
white-space: normal | pre(保留空白换行) | nowrap(不换行) | pre-wrap(保留空白换行)(ie8及以上) | pre-line(合并空白,保留换行)(ie8及以上)
word-spacing:normal | length(可负值)(中文无效)
text-overflow: clip(无) | ellipsis(省略号) | string(自定义);(no)
text-shadow: h-shadow(水平阴影的位置,允许负值) v-shadow(垂直阴影的位置,允许负值) blur (模糊的距离) color;(ie10及以上)
该属性是逗号分隔的阴影列表
word-break: normal | break-all(允许在单词内换行) | keep-all(只能在半角空格或连字符处换行);
word-wrap: normal | break-word;
tab-size(可继承)(规定制表符(tab)字符的空格长度,ie和safair不支持)
多列布局(ie10及以上)
column-count: number|auto;
div{
column-count:3;
}
column-gap: length|normal;(列间距)
div{
column-gap:40px;
}
column-rule: column-rule-width column-rule-style column-rule-color;(列间线)
column-rule-width: thin|medium|thick|length;
div{
column-rule:3px outset #ff00ff;
}
column-span: 1|all;(火狐不支持)
h2{
column-span:all;
}
column-width: auto|length;
div{
column-width:100px;
}
columns: column-width || column-count;
div{
columns:100px 3;
}
选择器与media
@media(ie9及以上)
@media all | screen | print | speech and (max | min | -aspect-ratio 宽高比 | device-aspect-ratio 屏幕可见宽高 | device-height 屏幕可见高度 | device-width | height | width | orientation = portrait || landscape 页面可见区域高度是否大于或等于宽度 | resolution(分辨率,ie9+,safari及chrome支持))
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
@media mediatype and|not|only (media feature) {
CSS-Code;
}`
或
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
选择器
只有Opera支持checked