方式一：html标签
让文字倾斜的html标签有 i、em、cite。
- 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字倾斜效果</title>
</head>
<body>
<i>tehub一个优秀的中文社区平台</i><br/>
<em>tehub一个优秀的中文社区平台</em><br/>
<cite>tehub一个优秀的中文社区平台</cite>
</body>
</html>
- 效果：
方式二：font-style
使用font-style: oblique或者font-style: italic设置字体倾斜。
font-style: oblique;
font-style: italic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字倾斜效果</title>
</head>
<style>
.text{
font-size: 30px;/*字体大小*/
font-weight: bold;/*字体粗细*/
color: red;/*字体颜色*/
font-style: oblique;/*文字倾斜*/
}
.text2{
font-size: 30px;/*字体大小*/
font-weight: bold;/*字体粗细*/
color: red;/*字体颜色*/
font-style: italic;/*文字倾斜*/
}
</style>
<body>
<div class="text">tehub一个优秀的中文社区平台</div>
<div class="text2">tehub一个优秀的中文社区平台</div>
</body>
</html>
- 效果
方式三：css3的transform
方式一和方式二只能固定倾斜的角度，要想自定义倾斜角度，可以用CSS3中的transform)属性。
transform:skew(x,y)函数定义了一个元素在二维平面上的倾斜转换。当设置一个参数时，表示垂直方向的倾斜角度；当设置两个参数时，第一个参数表示垂直方向的倾斜角度，第二个参数表示水平方向的倾斜角度。
transform:skew(x,y)
- 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字倾斜效果</title>
</head>
<style>
.text{
font-size: 30px;/*字体大小*/
font-weight: bold;/*字体粗细*/
color: red;/*字体颜色*/
transform: skew(20deg);
-webkit-transform:skew(20deg);/*谷歌的Chrome*/
-ms-transform:skew(20deg);/*微软的Internet Explorer、Edge浏览器*/
-moz-transform:skew(20deg);/*火狐的Firefox浏览器*/
-o-tranform:skew(20deg);/*Opera浏览器*/
}
</style>
<body>
<div class="text">tehub一个优秀的中文社区平台</div>
</body>
</html>
-
效果图：
-
使用
transform：rotate(deg)设置旋转角度
transform：rotate(deg)定义了一种将元素围绕一个定点旋转而不变形的转换，一般用于图片，很少用于文本。使用的时候我们要加上宽度才可以。
- 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字倾斜效果</title>
</head>
<style>
.text{
font-size: 30px;/*字体大小*/
font-weight: bold;/*字体粗细*/
color: red;/*字体颜色*/
transform: rotate(-5deg);/*设置倾斜角度*/
-webkit-transform:rotate(-5deg);/*谷歌的Chrome*/
-ms-transform:rotate(-5deg);/*微软的Internet Explorer、Edge浏览器*/
-moz-transform:rotate(-5deg);/*火狐的Firefox浏览器*/
-o-tranform:rotate(-5deg);/*Opera浏览器*/
width: 500px;/*加上宽度*/
}
</style>
<body>
<div class="text">tehub一个优秀的中文社区平台</div>
</body>
</html>
- 效果
评论(0)