如何利用CSS3属性clip对文字内容进行剪切

 时间:2024-10-23 06:17:37

1、第一步,在HBuilder工具里新建一个界面,设置页面名称clip.html,如下图所示:

如何利用CSS3属性clip对文字内容进行剪切

2、第二步,然后在<body></body>插入一个div标签元素,并在div中添加文字内容,如下图所示:

如何利用CSS3属性clip对文字内容进行剪切

3、第三步,给div标签元素设置position属性值为absolute,高度和行高为60px,背景色为#BC8F8F,如下图所示:

如何利用CSS3属性clip对文字内容进行剪切

4、第四步,保存代码并预览该界面,查看界面效果,发现文字全部显示,如下图所示:

如何利用CSS3属性clip对文字内容进行剪切

5、第五步,给div标签元素添加clip,分别设置这个属性的四个值,如下图所示:

如何利用CSS3属性clip对文字内容进行剪切

6、第六步,保存代码并预览该静态界面,再次添加clip-path属性,查看页面效果,如下图所示:

如何利用CSS3属性clip对文字内容进行剪切
  • 利用html+css+js实现滑动门事件
  • CSS教程 分组选择器的使用
  • 利用变量在页面间的传递实现页面跳转之二
  • css3线性渐变linear-gradient角度渐变
  • HTML教程 文本标签——下标(sub)的使用
  • 热门搜索
    alarm是什么意思 beyond什么意思 卫衣什么意思 搜集的意思 去泰国旅游穿什么 化妆的意思 风华正茂是什么意思 水彩笔什么牌子好 responsibility是什么意思 接二连三是什么意思