border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
这个可以做实心圆,长宽一样,圆角半径为长宽一般
2:
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];如果添加多个阴影,只需用 逗号隔开即可。
3:
rgba(R,G,B,A)rgba是一种颜色标准,(和其他一般颜色用法一致),四个参数范围 红色255 绿色255 蓝色255 透明度1
4:
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
第一个参数省略时,默认为“180deg”,等同于“to bottom”。
第二个和第三个参数, 表示颜色的起始点和结束点,可以有多个颜色值。
5:
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
text-overflow:表示文字越界的操作,这三个一起可以实现文字多出时用省略号表示
6:
@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }这样就可以在font-family中使用这个字体名称对应的字体了
7:
text-shadow: X-Offset Y-Offset blur color;这样可以用来设置文字阴影
8:
background-origin : border-box | padding-box | content-box;参数分别表示背景图片是从 边框,还是 内边距(默认值),或者是 内容区域开始显示。
需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。
http://write.blog.csdn.net/postedit/78314763
9:
background-clip : border-box | padding-box | content-box | no-clip参数分别表示从 边框、或 内填充,或者 内容区域向外裁剪背景。 no-clip表示不裁切,和 参数border-box显示同样的效果。
backgroud-clip
默认值为
border-box。
10:
background-size:cover 表示让图片以缩放的方式填满容器
11:
background
: #00FF00 url(bgimage.gif) no-repeat fixed top;
background的基础属性和默认顺序
12:
css属性选择器
a[href^="a"] a标签中href中以a打头的被选中a[class$="a"] a标签中class以a结尾的被选中a[href*="a"] a标签中href中存在a的被选中
(前面的可以是元素,类和id)
13:
css根选择器
:root{background:orange}
html {background:orange;} 就是选中根目录,就是html
14:
css伪类选择器-not
div:not([id="footer"]){} 表示div标签中id不为footer的所有元素都被选中
15:
css伪类选择器-empty
div:empty{} 表示中间没有任何内容的div被选中(<div></div>) 连空格注释都不能有
16:
css伪类选择器-target
#brand:target {
background: orange;
color: #fff;
}
<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div>
这里指的是这个a标签,在被点击后,它指向的div会获得的样式(注意这三个红色的字体要一样)
17:
css伪类选择器-first-child
li:first-child {
color: red;
}
1:是个li标签,2:这个标签是它父类的第一个子元素 满足这两点的被选中
ul>li:first-child{} ,表示父类必须是ul
18:
css伪类选择器:last-child
同上,只不过指的是最后一个元素
19:
css伪类选择器:nth-child(){}
括号中可以是1,2,3(从1开始,0不存在),n,2n或者odd,even
如 ul>li:nth-child(2n+1){}
20:
css伪类选择器:nth-last-child()
和19类似,只不过元素的顺序是从下向上开始算的(括号中选1则是选中最后一个元素)
21:
css伪类选择器:first-of-type
和first-child类似,只不过不需要是父类的第一个元素,只需要是父类中 该种类型标签的第一个就可以
22:
css伪类选择器:nth-of-type()
和nth-child类似,但是是从每种类型中选择 不是从所有子类中选择
23:
css伪类选择器:last-of-type
同上
24:
css伪类选择器:nth-last-of-type
同上
25:
css伪类选择器:only-child()
父元素中有且只有一个子元素,则这个子元素被选中
26:
css选择器:enable
选中表单中能用的元素
input[type="text"]:enabled (冒号之前不能有空格)这个选中input中所有文本输入框中能用的(disable="true')
27:
css选择器:disabled
和上面的enable作用相反,选中其中被禁止的元素
28:
css选择器:checked
改变表单中单选和复选框选中后的样式
29:
css选择器:selection (这个前面有两个冒号)
可以改变文字被选取时的样式(浏览器一般默认为蓝底白字)
::selection{} 火狐一般用::-moz-selection{}
30:
css选择器:read-only
选中那些只读的元素(“readonly=’readonly)
31:
css选择器:read-write
和read-only相反,只选中那些处于非只读状态的元素
32:
css选择器:before,after
:before 选择器向选定的元素前插入内容。使用content 属性来指定要插入的内容。(在查看元素中显示 ::before,::after)
例如
p:before
{
content:"Read this: ";
}
33:
rotate属性,其中为正值则顺势正旋转,其中为负数则逆时针选装
transform: rotate(45deg);这样就是顺势正旋转四十五度
34:
skew属性,表示为扭曲,transform:skew(x,y),
分别表示对x轴y轴的扭曲值
35:
scale属性,表示为放大缩小 transform: scale(0.5,1.5);
表示x轴方向变为原来的0.5倍,y轴方向变为原来的1.5倍
36:
translate属性,表示元素移动
transform: translate(50px,100px);表示向左平移50px,向下平移100px
37:
matrix属性,是以上集中方法的集合
matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());
用法如上,(这些值好像都不带单位)
38:
transfrom-origin属性,可以将元素的中心点进行偏移
transform-origin: left top;
这样可以将中心便宜点转移到左上角(用于rotate或者skew)
39:
transition属性,可以设置过度效果
-webkit-transition:all 0.5s ease-in 1s;
这四个属性分别表示 添加过度效果的属性 过度时间 效果 延迟时间(transition-property transition-duration transition-timing-function transition-delay)
40:
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:
ease ease-in linear ease-out ease-in-out 表示过度速度
41:
keyframes关键正属性 和视频中的关键字差不多
@keyframes 名字{0%{} 20%{} 100%{}} 表示每个关键时刻的样式
然后将这个名字放在animation中的animation-name属性中 就可以使用了
42:
animation包括一下几个属性
animation-name(指上面声明出的名字) animation-duration(持续时间) animation-timing-function(同上) animation-delay(同上) animation-iteration-count(播放次数 可以填数值(int)或者infinite(无限)) animation-direction(normal(每次循环的时候从头开始播放),alternate(偶数次正常播放,奇数次反向播放))
animate-play-state(running(正常播放),paused(暂停))
43:前缀兼容:
-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer
44:css中columns属性
columns: 200px 2; 表示元素中的文字分为两列,没列宽度为200px
也可以将其两个参数分开来写为 column-width;200px(auto); column-count:2(auto);
其他的相关属性还有column-gap(列与列的间距)
column-rule:width style color (相当于column的边框的样式)
column-span(设置column中的跨列属性)
45:css中的box-sizing属性
CSS2中,元素(例如div)的内边距(padding)和边框(border)会把元素自身撑大。想要个100*100px的div,都要事先计算,例如,内容80px + 内边距15px + 边框5px = 100px
CSS3中,新增 box-sizing 属性,如果设置元素为 box-sizing: border-box,那么元素的内边距(padding)和边框(border)不会再把元素自身撑大。例如,设置div为100*100px,那么无论div里内容、内边距、边框的宽高怎么变化,div的大小永远都是100*100px。
box-sizing:content-box;表示使用会填充的盒子样式