对于text-overflow:ellipsis,文本超出部分显示...,但要实现这个效果,却有一些必备条件,如下: div{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; /*其他属性*/ } 三个条件缺一不可,但是这些属性只能实现一行文本显示...,而对于要显示多行文本,并且只有最后一行显示...,就不适用了,所以需要修改样式,如下: div{ overflow: hidden; text-overflow: ell…

type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate" type="text/html"> <li> <div class="photo"> <a href="#"> <img src="[UserImg]" style="…

在使用JavaScript标签<script>的时候,其中type最常用的就是text/javascript 其实这个type还有其他用法,下面直接给出例子: type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate" type="text/html"> <li> <div class="phot…

CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技巧,希望能够为你的开发.设计工作带来一些帮助. 1.  圆角效果 如今的Web设计在不断跟进最新的开发技术,纷纷采用HTML5来开发多样性的Web应用.HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现.“border-radius”是实现这一功能的一个重要的属性,可以用来直接…

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. CSS3属性选择器 下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配方法. […

==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); console.log(test.style); 然而这种方法并没有什么效果,因为style代表的是行间样式. 我突然想起以前学JS运动,有一个叫做getStyle的方法 function getStyle(obj, name){ if(obj.currentStyle){ return obj.cu…

CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby 语音 表格 文本 2D/3D 转换 过渡 用户界面 "CSS" 列指示该属性是在哪个 CSS 版本(CSS1.CSS2 或 CSS3)中定义的. CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,…

Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet"…

常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 normal 默认 break-word 内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height.width或display:block或position:absolute. word-break: 处理单词折断 normal 使用浏览器默认的换行规则. break-all 允许在单…

css3 属性 text-overflow: ellipsis 前言 正文 结束语 前言 我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替,类似这样的效果: 做到这样的效果,我们需要运用两个特殊的样式来实现 text-overflow 和 white-space 正文 让我们分别来看一下使用了这些样式,和不使用这些样式的区别吧 html内容 <div class="box"> <span>我是一段测试文…

今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin. 姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性.也这样让我在思考,那么有了 Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不…

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数"角度",单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度. 二.缩放 scale 用法:transfo…

一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问题.(待深入研究) 二.距离上一次发布<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>转眼已过去一年,在这一年里,浏览器领域的竞争愈演愈烈.Firefox 成为新的“版本帝”但依然未能摆脱被 Chrome 超越的命运,支持更多标准的 IE10 将随着 Windows 8 在10月底正式发…

方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><…

最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc.个人认为这两个文件的作用差不多,具体差异值得探讨) 下载地址:https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3 支持的主要CSS3属性: 1.border-radius圆角 CSS代码如下:         .pie_radius{             width:250px;height:250px;  …

我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的.到目前为止,有不少可以让IE支持部分CSS3属性的工具.例如: 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName…

CSS3的box-shadow属性可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性: Opera: 不知道是从哪个版本开始支持的,我在发这篇文章测试的时候,正好更新了Opera到最新的10.53版本,已经支持box-shadow属性. Firefox通过私有属性-moz-box-shadow支持. Safari和Chrome通过私有属性-webkit-box-shadow支持. 所有IE不支持(不知道IE9…

CSS3的box-shadow属性可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性: Opera: 不知道是从哪个版本开始支持的,我在发这篇文章测试的时候,正好更新了Opera到最新的10.53版本,已经支持box-shadow属性. Firefox通过私有属性-moz-box-shadow支持. Safari和Chrome通过私有属性-webkit-box-shadow支持. 所有IE不支持(不知道IE9…

一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了steps和右边没加的区别.左边的是一锤一锤的,右边会出现影子. [注意下面这个demo在firefox中不能执行,只能在chrome中执行,因为我动画的是“background-image”属性] 代码如下,我只把关键的几个代码贴出来了,详细的可以 .btn-pay { 02   background…

例如以下代码的解析 -ms-transform:rotate(7deg); -moz-transform:rotate(7deg); -webkit-transform:rotate(7deg); -o-transform:rotate(7deg); 首先transform字母上就是变形,改变的意思.在css3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看css3中transform的旋转r…

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 颜色 CSS3中,有一种新的表示颜色的方式:RGBA或者HSLA. RGBA.HSLA可应用于所有使用颜色的地方. RGBA 举例: background-color: rgba(0, 0, 255, 0.3); border: 30px solid rgba(0, 255, 0, 0.3…

困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border.padding.content 三种,而且这两个属性表示的都是元素背景与元素边框.补白(padding)和内容区域之间的某种关系. 比如,我们想要在边框上显示背景,我们可以使用background-origin帮我们实现(前提是边框要是透明的,不然它会覆盖住背景) 这里为了既体现出边框,又体现出边框中的背景,我特意使用了虚线的边框.(…

来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-border-radius: 10px;/*moz内核浏览器*/ border-radius:20px;/*直接支持css3圆角属性的浏览器(如IE10)*/ }/*配合js使用*/ /…

原文地址 CSS3的属性为什么要带前缀 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准.为此,当一些CSS3样式语法还存在波动时,它们提供针对浏览器的前缀.现在主要流行的浏览器内核主要有: Trident内核:主要代表为IE浏览器 Gecko内核:主要代表为Firefox Presto内核:主要代表为Opera Webkit内核:产要代表为Chrom…

我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的.到目前为止,有不少可以让IE支持部分CSS3属性的工具.例如: 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName…

http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-12-14  love朱朱  文章来源  阅 9569  转 19 转藏到我的图书馆   微信分享:   一.PIE之简述 在国外,CSS3的盛行与普及,探讨与研究要比国内领先不知多少个身位.相比之下,国内似乎如一潭死水,为何?我觉得国内领先的前端团队应该通过自身的影响力,带动国内整个前端领域与时俱进…

今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin. 姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性.也这样让我在思考,那么有了Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不是…

CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具,比如说border-radius.gradient.transfrom.animation.transition.rgba.text-shadow.box-shadow.text rotation和@font-face.同样的你可以在线设置相关属性参数,了解浏览器对其的支持性,最方便的可以直接下载生成的代码. CSS3 Maker 彩蛋爆料直击现场 CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具,比如说bor…

3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1  3D转换属性 3D的转换方法如表2: 表2  3D转换方法     1  transform-style transform-style经常被用来做三维空间坐标系中的图形变换,下面我们就来看看CSS3中设置3D变形的transform-style属性详解.transform-style指定嵌套元素如何在3D空间中呈现.主要有两个属性:flat和perserve-3d. transform-style属性的使用语法如下: t…

CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.background-origin.background-size,这三个属性描述如表1: 表1  CSS3新增背景属性 1  多背景 CSS3允许设置多个背景图片,每个背景用逗号隔开,每个背景图片占一层,层的上下显示按照在CSS中写的顺序来定,最先写的背景在最上层. 多背景的格式如下: background: ur…