• 技术文章 >web前端 >html教程

    html怎么设置边框

    藏色散人藏色散人2021-04-01 11:11:23原创52921

    html设置边框的方法:1、通过“border-width”属性设置边框宽度;2、通过“border-style”属性设置边框样式;3、通过“border-color”属性边框颜色。

    大前端成长进阶课程:进入学习

    本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

    HTML 为元素设置边框

    属性:border,可以为元素这是上右下左四条边框(顺序很重要)

    取值有三个:

    1.border-width:边框宽度,默认3px,可以手动设置,取像素值

    2.border-style:边框样式,必填项。可取: solid (实线边框) dashed(虚线边框) dotted(点线边框) double(双线边框)

    3.border-color:边框颜色,取颜色值,默认黑色

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style media="screen">
            h1{
                width:300px;
                height:150px;
            }
            .c1{
                /*边框宽度与颜色有默认值,样式必须设置*/
     border:solid;
            }
            .c2{
                border:5px solid red;
            }
            .c3{
                border:5px dashed green;
            }
            .c4{
                border:5px dotted blue;
            }
            .c5{
                border:5px double orange;
            }
        </style>
    </head>
    <body>
    <h1 class="c1"></h1>
    <h1 class="c2"></h1>
    <h1 class="c3"></h1>
    <h1 class="c4"></h1>
    <h1 class="c5"></h1>
    </body>
    </html>

    效果如下:

    2d78b557131e9f3611db6de03499b32.png

    推荐学习:《HTML视频教程》《css视频教程

    以上就是html怎么设置边框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:html
    上一篇:html怎么设置图片 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 怎么修改html文件• html怎么设置背景• 怎么注释html• html图片不显示怎么办
    1/1

    PHP中文网