如何利用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)的使用
  • 热门搜索
    春天哪里旅游好 平顶山旅游网 九华山旅游景点 旅游群 陕西省旅游局政务网 福建云水谣旅游攻略 成都到峨眉山旅游攻略 盘锦红海滩旅游攻略 福建泰宁旅游攻略 无锡的旅游景点