现代CSS

行高，顾名思义指的就是一行文字的高度。按照定义来解释，就是两行文字之间基线之间的距离。那么问题来了，什么是基线呢？大家回想下我们刚开始学习汉语拼音的时候，使用四线格本子的四条线，其中倒数第二条线就是基线，如果你说，抱歉，我已经全部还给老师了，没有任何印象。呵呵，别急呢，我已经给…

哈哈，大家清醒清醒，那么漂亮的月亮，大家有没有想过我们的css可以搞定任意颜色的月亮呢？答案是：肯定可以的。那么今天就给大家讲讲任意颜色的月亮怎么实现：使用线性渐变linear-gradient，so easy!如果对这个属性不熟悉的，可以先看我之前写的关于线性渐变的文章【前端…

在前面的两篇文章：CSS深入理解之float浮动和CSS深入理解之absolute定位中，介绍了float和absolute的特性和使用方法，如果大家仔细阅读完了这两篇文章，相信你的CSS打怪技能又提高的一大截，那么趁着自己最近状态不错，就多给大家分享点自己平时所学的技能。一方…

1. 写在前面 本篇将要介绍的绝对定位absolute属性和此前介绍的CSS系列——CSS深入理解之float浮动有着几分的相似性，可以认为两者是兄弟关系，都具有“包裹性”、“高度塌陷”、“块状化”的特性，它们在很多场合都可以互相替代。很多人可能有这样的疑问：一个属性名是“po…

入行前端一年多的时间，想提高自己的css技术水平，于是在网上看了些关于css的书籍，想买几本比较好的css书籍啃啃，找来找去，终于找到了《CSS揭秘》这本书。入手这本书后，从开始看到后面，发现书中的很多效果都可以使用渐变来实现，于是，我对渐变产生了兴趣，决定好好掌握css3中的…

前一段时间我写了几篇关于css属性的理解和用法方面的文章，今天就不分享css属性了，给大家分享一个我们在实际工作中用到比较多的一个效果——Tab选项卡效果。首先，我们先来看看Tab选项卡效果是什么样子，以QQ新闻为例，有如下效果： 当鼠标滑动到相关的标题上时，标题对应的内容就会…

1. float介绍 CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离，相当于不占据任何空间，所以文档中普通流中的…

在CSS3中，可以使用box-shadow属性来创建阴影效果来给二维平面增加深度效果，这个属性在前端开发中使用的非常多，例如segmentfault的首页就是使用了box-shadow属性来增加深度效果，今天我们就一起来看看这个属性。 其中，+在正则表达式中表示一次或者多次的意…

在CSS系列——一步一步带你认识transition过渡效果这篇文章中，我给大家详细讲解了transition过渡的用法，能够实现比较友好的过渡效果，但是功能比较有限，如果要想实现比较漂亮的动画效果，就需要我们今天要请出主角animation登场了。首先，我们来看看animat…

线性渐变是沿着一条直线渐变，而径向渐变则是沿着椭圆或者圆进行渐变。其标准语法如下： position，指明径向渐变的椭圆或者圆心的位置，支持的值有：left、right、top、bottom，也可以指定px或者百分比，默认是图形的正中心。相应的对应关系如下： shape，指明径…