首页 > 软件开发 > CSS >

如何用CSS制作信封图案

来源:互联网 2023-03-16 19:10:38 488

如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

工具/原料

  • windows 7
  • sublime text3
  • IE11

方法/步骤

  • 1

    新建一个HTML文件,创建基本的框架。kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

  • 2

    创建一个CSS文件,并且用LINK来进行连接。kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

  • 3

    我们先创建一个长方形,填充颜色。kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

  • 4

    然后用position来调整一下方块的位置。kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

  • 5

    然后我们为4个边分别加上border。kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

  • 5本页面未经许可获取自百度经验
  • 6

    现在我们可以把长宽给取消掉,也可以设置为零。kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

  • 7

    这个时候把顶边设置为transparent。kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

  • 8

    我们还可以用border-radius来把边框来调整为圆角。kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

    如何用CSS制作信封图案kUr办公区 - 实用经验教程分享!

  • 注意事项

    • 注意边框和内容的区别

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!kUr办公区 - 实用经验教程分享!


    标签: CSSHTML图标

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码