css3
homandjing
软件工程专业学生
展开
-
css3 animation 动画
闲着没事儿研究了一下CSS3 animation。 看了看别人写的东西,可惜的是目前还是只能在Chrom下面使用。animation的语法也比较简单:#moonobt{ position:absolute; left:0; top:475px; height:50px; width:800px;-webkit-animation-name: mobt; /* 指定动画名称*/-webk...原创 2011-09-14 14:29:11 · 89 阅读 · 0 评论 -
非直角arrow(箭头) 的两种实现
1) rotate + skew 原理:箭头的两边就是一个透明div的border,通过skew扭转成需要的角度,再通过rotate把箭头摆正。 <div id="arrow"> <span></span></div> #arrow{ -webkit-transform: rotate(-51deg);...原创 2012-10-17 14:27:01 · 200 阅读 · 0 评论 -
css 小箭头
直接上代码 #arrow{ width: 10px; height: 10px; border-top: 5px solid #BFDDB7; border-right: 5px solid #BFDDB7; -webkit-transform: rotate(45deg);} 原理很简单:旋转45度(上边框+右边框) ...2012-07-16 16:53:25 · 67 阅读 · 0 评论 -
css selector 选择器
父子兄弟a > b b必须是a的子元素a + b b必须紧跟在其同胞标签a的后面a ~ b b必须跟(不一定紧跟)在其同胞标签a的后面* 有个非常有意思的用法,即非子选择符a * b 任何是a孙子元素,而非子元素的b标签都会被选中 在HTML5中,属性值的引号可加可不加 UI伪类链接伪类a::link...原创 2013-03-29 08:44:38 · 132 阅读 · 0 评论 -
多行文字溢出[...]的实现(text-overflow: ellipsis)
对于单行文字, 很简单. .oneLine { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} 对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持. ...2012-12-07 03:37:07 · 190 阅读 · 0 评论 -
rem (root em)
rem ( root em) unitsType of unit similar to "em", but relative only to the root element, not any parent element. Thus compounding does not occur as it does with "em" units. Here is an examp...2012-12-12 10:25:49 · 158 阅读 · 0 评论 -
word-break
-ms-word-break: break-all; word-break: break-all;/* Non standard for webkit */ word-break: break-word;-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; ...原创 2014-05-29 11:24:39 · 129 阅读 · 0 评论 -
计算CSS选择器的特性(选择器优先级)
下面是W3官方的描述A selector's specificity is calculated as follows:count the number of ID selectors in the selector (= a)count the number of class selectors, attributes selectors, and pseudo-classes...原创 2014-04-02 16:04:53 · 139 阅读 · 0 评论