Tagged

before

A collection of 3 posts

before

CSS伪元素before、after妙用:制作时尚焦点图相框

在css选择器中有这样子的写法div:before、div:after,对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处? :befor、:after是CSS的伪元素,什么是伪元素呢?伪元素用于向某些选择器设置特殊效果。 我们用CSS手册可以查询到其基本的用法: E:before/E::before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用 E:after/E::after 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用 Ie6-7 不支持 既然说到了before、after,那么我们也要大概的了解下content,content用来和:after及:before伪元素一起使用,在对象前或后显示内容。基本的用法如下: div:after{content:'任意字符串';} 现在我们大概知道before和after的大概用法了,那么我们就可以在元素的内容之前或者之后插入新内容。而插入的内容我们也可以用css样式 来加以控制和美化。也许在平常中这样子的标签用处不大,但是存在即是真理,哈哈,

before

一些上流的CSS3图片样式

译自:CSS3 Image Styles 中文:一些上流的CSS3图片样式 请尊重版权,转载请注明来源,多谢~~ 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们。不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程,讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。 先看下demo 问题 (见 demo) 看一下demo,请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius,但不会渲染inset box-shadow。chrome/safari则两者都不渲染。 解决方案 要让 border-radius 和 inset box-shadow 正常工作,解决方案就是将实际图片变作background-image. 动态方法 要想动态实现,

before

:before和::before的区别

在一次项目中,有一次要用到::selection伪元素,然后开发同学问我,CSS中一个冒号和两个冒号有神马区别? 这好像真的是个问题,或许很多前端同学对此都有疑惑,查了些资料,证实了下两个符号的区别,简而言之:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。 W3C关于CSS3选择器的规范中有一段描述: A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with