首頁 > web前端 > html教學 > CSS3学习笔记_html/css_WEB-ITnose

CSS3学习笔记_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:36:49
原創
1134 人瀏覽過

用的时候首先记得加前缀:-webkit-,-moz-,-o-,-ms-,因为目前各个浏览器对CSS3和HTML5的兼容性还是参差不齐。

边框:
1.border-radius(实心圆的实现)
2.box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式](用逗号可叠加效果)
3.border-image:url(border.png) 70 70 70 70 round /repeat/stretch(由外到内切片的偏移量,分别为上右下左)

颜色:
1.RGBA(多了一个透明度)
2.颜色渐变:linear/radial gradient(to left,#fff,blue,red)

文字和字体:
1.text-overflow:clip(剪切) | ellipsis(显示省略)/*要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果*/
2.word-wrap:normal(控制连续文本换行) | break-word(内容在边界内换行)
3.@font-face{  font-family:字体名称;src:字体文件在服务器的路径;}
4.text-shadow:X-Offset Y-Offset blur color;

背景:
1.background-origin: border-box | padding-box | content-box;/*设置元素背景图片的原始起始位置,如果背景不是no-repeat,这个属性无效*/
2.background-clip: border-box | padding-box | content-box | no-clip;
3.background-size: auto | | | cover(填满整个容器) | contain(某一边紧贴容器边缘)/*设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。*/
4.多背景图

选择器:
1.新增属性选择器a[href^=val](开头) | a[href$=val](结尾) | a[href*=val](包含)
2./:root/:not/:empty/:target(用来匹配指向链接的样式)
3.first-child(匹配第一个子元素)/last-child/nth-child(数字)/nth-last-child/(类型)first-of-type/nth-of-type(2n)/:only-child(来控制仅有一个子元素的样式)/only-of-type
4.:enabled/:checked/::selection选择器(鼠标选择时)/:read-only/:read-write/::before和::after(用来给清除浮动,添加阴影等)

变形:
1.rotate(..deg)(旋转)
2.skew(x y)(扭曲)
3.scale(x,y)(缩放)
4.translate(x,y)(位移,可以应用在居中上)
5.matrix()(矩阵,用于2D变换)
6.transition-duration(过渡所需时间)
7.transition-timing-function(linear/ease-in-out/ease-out/ease-in)(随着时间而过渡的快慢)
8.transition-delay(用来指定当改变元素属性值后多长时间开始执行)

动画:
1.Keyframes(类似于Flash中的关键帧)(格式:百分比{样式})
2.animation-name(调用Keyframes定义好的动画)
3.animation-duration(用来设置CSS3动画播放时间)
4.animation-timing-function(主要用来设置动画播放方式)
5.animation-delay
6.animation-iteration-count(infinite | )
7.animation-direction(normal、alternate)
8.animation-play-state(running和paused)
9.animation-fill-mode(none、forwards、backwords和both)定义在动画开始之前和结束之后发生的操作

布局:
1.columns:列宽 || 列数 / columns-width(auto/列宽) / column-count(auto/列数)
2.column-gap(列间距)
3.column-rule:||(列表边框)
4.column-span(跨列设置)
5.弹性盒子模型
6.伸缩布局

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板