这里有篇文章， https://css-tricks.com/examples/ShapesOfCSS/ ，介绍了如何用只用1个元素和CSS规则绘制各种常见的图形： 从简单的矩形、三角形到复杂的月亮、放大镜甚至是太极图。 这种绘图方式主要用到了两类技巧： 一是使用伪元素， 二是设置图形的边框。特别是 ...
分类：
Web程序 时间：
2017-08-10 10:16:29
阅读次数：
189
对复选框自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。 如果直接对复选框设置样式，那么这个伪类并不实用，因为没有多少样式能够对复选框起作用。不过，倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式。 很多时候，无论是为了表单元素统一，还是为 ...
分类：
其他好文 时间：
2017-08-07 23:19:31
阅读次数：
455
我们有时候想在页面显示一个公告或用户提示信息。一个经常使用设计是使用书签形状。我们能够给书签加入卷角效果。以使其更为逼真。所谓的“卷角”实际上能够用小角度倾斜的阴影效果来模拟。用CSS3的伪元素实现这个效果非常easy。先给出一个实例。我们在WOW网站页面左边栏实现了例如以下的效果（红框内）：我们再 ...
分类：
Web程序 时间：
2017-08-06 12:44:25
阅读次数：
589
对于伪类和伪元素，我如果要区别它们，一般是使用css中的手册来区分，平常时候也没特意去记，需要用到时打开手册“哦，这个是伪元素，这个是伪类”，我个人觉的某些东西你把它存在网上，不一定要存在头脑中。带着这样的思维去面试的我，常常碰壁，当人事问我会什么的时候，我说我会百度，然后就没有然后了……笑话不多说 ...
分类：
Web程序 时间：
2017-08-03 15:03:29
阅读次数：
176
做移动端页面时，又想用伪元素做真实1像素边框，又想有边角时，会发现只加一个border-radius时出来的效果边款并没有变成圆角，解决办法是加两个border-radius 图中边框用了真实1px，在pc端看可能不太明显 ...
分类：
移动开发 时间：
2017-07-31 17:52:42
阅读次数：
169
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。 应用： （1） 清楚浮动 .clearfix:after { content:". ...
分类：
Web程序 时间：
2017-07-29 14:00:43
阅读次数：
140
css3为了区分伪类和伪元素，伪元素采用双冒号写法。 常见伪类—— :hover, :active, :visited, :focus。 常见伪元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::after ...
分类：
Web程序 时间：
2017-07-26 12:32:33
阅读次数：
163
//首先写一个导航栏样式 .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; background: #f65f57; border-radius:10px;/ ...
分类：
其他好文 时间：
2017-07-23 19:38:21
阅读次数：
179
原文地址：http://www.zhangxinxu.com/wordpress/?p=739 一、哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围。content属性早在CSS2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏 ...
分类：
Web程序 时间：
2017-07-22 20:00:03
阅读次数：
277
CSS的元素选择器除了根据id（#）、class（.）、属性（[ ]）选取元素以外，还有很重要的一类，就是根据元素的特殊状态来选取元素。它们就是伪类和伪元素。跟id选择器、类选择器、属性选择器以及派生选择器等等这些从HTML文档层次结构（DOM树）中获取元素不同的是，伪类和伪元素是预定义的、独立于文 ...
分类：
Web程序 时间：
2017-07-22 19:39:35
阅读次数：
160
