首页 > 软件开发 > HTML >

HTML用代码制作虚线框方法

来源:互联网 2023-03-16 19:19:41 405

HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

工具/原料

  • 华为MateBook D
  • Windows 10 10.3.3
  • DW2022

方法/步骤

  • 1

    如图,建立一个div标签,然后对他添加修饰,设置宽高、边缘设置以及居中设置FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 2

    现在效果这样的,如图FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 3

    如果我们想要将实线变成虚线的 ,我们要修改代码中的border值,在border值属性中有个solid属性,这个就是实体的意思,我们要修改就改动这里FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 4

    在border属性中有很多的属性,第一个dashed就是虚线的意思FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 5

    然后我们将之前的实体改成为dashed虚线值,如图,然后保存FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 6

    这时候我么就会将之前的实体线变成了虚线框了FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 7

    如果想要将直角的框变成圆角的或者直接是圆形框,需要调节border-radius属性,也就是圆角值设置FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 7该信息非法爬取自百度经验
  • 8

    如图,效果明显FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 9

    下面我么看下dotted属性是怎么个效果,这个是点的意思FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 10

    将其换成点状态,效果也是虚线状图案,如图FOg办公区 - 实用经验教程分享!

    FOg办公区 - 实用经验教程分享!

    FOg办公区 - 实用经验教程分享!

    HTML用代码制作虚线框方法FOg办公区 - 实用经验教程分享!

  • 注意事项

    • 如果此经验对您有帮助,请左侧投票/关注,谢谢大家的支持^_^

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


    标签:

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