怎么用css控制字体倾斜,不是斜体,是整体倾斜一个角度

html-css012

怎么用css控制字体倾斜,不是斜体,是整体倾斜一个角度,第1张

一种字体有粗体、斜体、下划线、删除线等诸多属性。

但是并不是所有字体都做了这些,一些不常用的字体,或许就只有个正常体,如果你用italic,就没有效果了~这时候你就要用oblique.

css2.0解释

italic和oblique都是向右倾斜的文字,

但区别在于italic是指斜体字,而oblique是倾斜的文字,对于没有斜体的字体应该使用oblique属性值来实现倾斜的文字效果.

首先创建一个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属性,在本例基础上添加鼠标悬停效果,

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

<div>

<span>xxxx</span>

</div>

div用css3变形为平行四边形,span再给变回来就好了