如何使用 CSS3 伪类

html-css030

如何使用 CSS3 伪类,第1张

你说的是css3伪类选择器吗?

E:link    CSS1    设置超链接a在未被访问前的样式。  

E:visited    CSS1    设置超链接a在其链接地址已被访问过时的样式。  

E:hover    CSS1/2    设置元素在其鼠标悬停时的样式。  

E:active    CSS1/2    设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。  

E:focus    CSS1/2    设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。  

E:lang(fr)    CSS2    匹配使用特殊语言的E元素。  

E:not(s)    CSS3    匹配不含有s选择符的元素E。  

E:root    CSS3    匹配E元素在文档的根元素。  

E:first-child    CSS2    匹配父元素的第一个子元素E。  

E:last-child    CSS3    匹配父元素的最后一个子元素E。  

E:only-child    CSS3    匹配父元素仅有的一个子元素E。  

E:nth-child(n)    CSS3    匹配父元素的第n个子元素E。  

E:nth-last-child(n)    CSS3    匹配父元素的倒数第n个子元素E。  

E:first-of-type    CSS3    匹配同类型中的第一个同级兄弟元素E。  

E:last-of-type    CSS3    匹配同类型中的最后一个同级兄弟元素E。  

E:only-of-type    CSS3    匹配同类型中的唯一的一个同级兄弟元素E。  

E:nth-of-type(n)    CSS3    匹配同类型中的第n个同级兄弟元素E。  

E:nth-last-of-type(n)    CSS3    匹配同类型中的倒数第n个同级兄弟元素E。  

E:empty    CSS3    匹配没有任何子元素(包括text节点)的元素E。  

E:checked    CSS3    匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)  

E:enabled    CSS3    匹配用户界面上处于可用状态的元素E。  

E:disabled    CSS3    匹配用户界面上处于禁用状态的元素E。  

E:target    CSS3    匹配相关URL指向的E元素。  

@page:first    CSS2    设置页面容器第一页使用的样式。仅用于@page规则  

@page:left    CSS2    设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则  

@page:right    CSS2    设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则  

首先创建一个div元素容纳文本信息(可以包含更多元素),class取名为“狗耳朵”也就是卷角的意思:

[html] view plain copy

<div class="dog-eared-tip">put your tips here</div>

然后编写如下的CSS代码:

[css] view plain copy

.dog-eared-tip{

padding: 7.5px 5px 7.5px 20px

background: #DEAA2F

font-size: 13px

position: absolute

text-align: center

width: 100%

color: black

}

.dog-eared_tip:before, .work_tip:after {

content: ""

position: absolute

z-index: -2

-moz-transform: rotate(-3deg)

-webkit-transform: rotate(-3deg)

-o-transform: rotate(-3deg)

-ms-transform: rotate(-3deg)

transform: rotate(-3deg)

bottom: 15px

box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7)

height: 50%

left: 10px

max-height: 100px

max-width: 300px

width: 50%

}

.dog-eared_tip:after {

-moz-transform: rotate(3deg)

-webkit-transform: rotate(3deg)

-o-transform: rotate(3deg)

-ms-transform: rotate(3deg)

transform: rotate(3deg)

left: auto

right: 10px

}

上面的代码首先设置了div的常用样式如底色、字体、居中、边距等。

然后为该div的:before和:after伪元素设置框阴影(box-shadow)和小角度旋转(rotate方法),

并把before和after的位置放在div的底部,并且z序列为负数,这样的实际效果就是伪元素本身被div所遮挡,但是刚好使得其外围阴影部分露出底部。

注意,这里请记得不要给div设置overflow不可见的样式,否则阴影不可见。

基本上好了,还差最后一步,两边阴影的倾斜度在物理学上是对称的,所以我们还需要调整一下:after伪元素的倾斜角度(-3°调整为3°)。

这样:before对应于标签的左下边角,:after对应于标签的右下边角的卷曲阴影。

本例在IE11/Chrome/FF/Edge下可以工作。

你还可以使用CSS3中的伪类:hover和transition属性,在本例基础上添加鼠标悬停效果,

也就是当用户悬停在书页上时,呈现卷角被缓缓抚平的效果,我们把这个称之为“会呼吸的纸”。