css学习知识点
各个前缀所代表的浏览器:
Webkit: chrome, safari【也有可能是opera】
Moz: 火狐
Ms: 主要是IE
O: opera
border-radius: IE9 -webkit- , -moz-
background-image,background-origin, background-clip: ie9 无前缀
Background-size: ie9 -webkit- -moz- -o-
background-origin: border-box, padding-box, content-box
渐变: IE10, 所有渐变的前缀: -webkit- , -moz- , -o-
Linear-gradient: 线性渐变 语法
①: Background: linear-gradient(direction, color1, color2, ......),默认: direction: 从上到下。如:
Background:-webkit-linear-gradient(blue, red);
Background:-moz-linear-gradient(blue, red);
Background:-o-linear-gradient(blue, red);
Background:linear-gradient(blue, red);
注意direction的方向上的不同:如 【从左到右】
Background:-webkit-linear-gradient(left, blue, red);
//注意-webkit-的方向的写法
Background:-moz-linear-gradient(right, blue, red);
Background:-o-linear-gradient(right, blue, red);
Background:linear-gradient(to right, blue, red); //标准写法
② background:linear-gradient(angel, color1, color2),
0deg: 表示从下(color1)到上(color2)的渐变
90deg: 表示从左(color1)到右(color2)的渐变
文本效果:
Text-shadow: ie10 ,
h1{ background-color: #ddd;
text-shadow: 2px 2px 4px #000;
color: #fff;
padding: 6px 10px;}
Box-shadow: ie9, 如 -webkit- , -moz-
div{ width:300px;
height:100px;
background-color:yellow;
box-shadow: 0px 0px 15px #888888; }
Word-break: 不兼容opera
字体:@font-face: ie9
@font-face
{
font-family: myFirstFont;
src: url(引入字体文件);
}
2D动画篇
Transform, transform-origin: IE9, -webkit-, -ms-, -webkit-, -o-
------------------未待完续,敬请期待。
css学习知识点的更多相关文章
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- CSS基本知识点——带你走进CSS的新世界
CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结(二) 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结(一) 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
随机推荐
- 开源企业IM-免费企业即时通讯-ENTBOOST V2014.180 Linux版本号正式公布
ENTBOOST,VERSION 2014.180 Linux版本号公布,主要添加企业IM应用集成功能,完好安卓SDK功能及部分BUG修正: 7/1(明天)公布Windows版本号,敬请关注! ENT ...
- hbase importtsv
hadoop jar hbase-server-0.98.1-cdh5.1.3.jar importtsv -Dimporttsv.columns=HBASE_ROW_KEY,cf:imsi,cf:i ...
- 【转】这些隐藏在苹果iPhone当中的内置代码你是否知道?
原文地址:http://www.ithome.com/html/iphone/200569.htm 每一部手机都有一些内置的隐藏代码,我们称之为“指令”,这些代码加在一起就叫做“指令集”.当然这些代码 ...
- 使用cvReleaseImage()释放图像出错
前几天用opencv写程序的时候,在用cvReleaseImage()函数释放cvLoadImage()加载的图像的时候出错,如下所示: IplImage *src = cvLoadImage(fil ...
- Android.Hacks.01_Centering views using weights
Android.Hacks读书笔记01 #1#权重布局之解析: LinearLayout ’s android:weightSum LinearLayout ’s child android ...
- getActionBar()空指针异常
网上的各种解决方案已经不少了,但是不适合于我的,谷歌一种新的解决方案 you can directly specify it in manifest file 1 2 3 4 <applicat ...
- XML_PULL解析
一.在Android应用中的XML文件来源 1.本地xml文件 本地XML文件可以放在应用根目录assets文件夹.res/xml.res/raw.SDcard卡.应用的data目录等: 除r ...
- php 文件操作类
class fileInit { /** * 创建空文件 * @param string $filename 需要创建的文件 * @return */ public function create_f ...
- 手机开机提示SD卡受损
手机开机提示SD卡受损,手机不显示内存卡,有人会选择换新卡或者格式化内存卡,如果刚好木有备份,内存卡上的珍藏丢失了多心痛啊.其实,我们可以通过电脑救活提示受损的内存卡,前后不超过5分钟... 方法:1 ...
- 算法分析-leedcode正则题目
Implement regular expression matching with support for '.' and '*'. 首先这里有个可能大家不知道的地方: if p[0] = '*', ...