![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 202 阅读 · 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 · 69 阅读 · 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 · 133 阅读 · 0 评论 -
多行文字溢出[...]的实现(text-overflow: ellipsis)
对于单行文字, 很简单. .oneLine { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持. ...2012-12-07 03:37:07 · 191 阅读 · 0 评论 -
rem (root em)
rem ( root em) units Type 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 · 160 阅读 · 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 · 131 阅读 · 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 · 142 阅读 · 0 评论