CSS怎么把div里的图形倾斜,而文字不倾斜

html-css06

CSS怎么把div里的图形倾斜,而文字不倾斜,第1张

<div class="wrap">

    <span>文字文字文字</span>

</div> .wrap{

    -webkit-transform:skew(20deg)

}

.wrap span{

    display:inline-block

    -webkit-transform:skew(-20deg)

}

其他浏览器私有前缀自己加,就是外层正度数,内层负度数,度数相等就可以,元素必须是块级元素

1、打开html开发软件工具,新建一个html代码页面,创建一个<div>,同时给这个<div>添加一些文本内容和一个class类为 oblique。

2、使用font-style: oblique设置字体倾斜。创建<style>标签,然后在这个标签里面设置oblique类font-style属性为oblique。

代码:

<style>

.oblique{

font-style: oblique

}

</style>

3、最后,可以用链接打开可以看到已经倾斜45度,就是上面的代码编写即可。

有三种方法可以实现CSS圆角。第一、直接写CSS代码:border-radius

例如:border-radius:10px第二、四个圆角贴图;制作四个圆角的图片,然后用css定义

第三、直接制作整个矩形背景。总归而言,第一种方式最简单,只要一行代码。