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

    边框css四边怎么加

    藏色散人藏色散人2021-01-05 14:38:24原创1615

    css设置边框四边的方法:1、使用border-bottom属性设置下边框;2、使用border-left属性设置左边框;3、使用border-right属性设置右边框;4、使用border-top属性设置上边框。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、css3版本,Dell G3电脑。

    相关推荐:《css视频教程

    边框css四边怎么加?

    1、使用border属性,一次性设置四个边框的样式

    border:在一个声明中设置所有的边框属性。

    可设置的边框属性:

    border-width:指定边框宽度

    border-style:指定边框样式

    border-color:指定边框颜色

    示例:设置四个边框样式

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style>
    p
    {
    border:5px solid red;
    }
    </style>
    </head>
    <body>
    <p>段落中的一些文本。</p>
    </body>
    </html>

    效果图:

    40ee3a02211f95485d72a6d081c6f64.png

    2、使用border-bottom、border-left、border-right、border-top分别设置四个边框的样式

    border-bottom:在一个声明中设置所有的下边框属性。

    border-left:在一个声明中设置所有的左边框属性。

    border-right:在一个声明中设置所有的右边框属性。

    border-top:在一个声明中设置所有的上边框属性。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style>
    p 
    {
    border-bottom:thick dotted #ff0000;
    border-left:thick solid #ff0000;
    border-top:thick dashed #ff0000;
    border-right:thick double #ff0000;
    }
    </style>
    </head>
    <body>
    <p>段落中的一些文本。</p>
    </body>
    </html>

    效果图:

    0bf0b25234f0d5d3b53647079639474.png

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

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

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

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

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

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

    专题推荐:css
    上一篇:css a hover 不变色怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• css如何实现不显示table的边框• css怎么给图片加上下边框• css3怎么加内边框• css设置table圆角边框不起作用是什么原因• 波浪的边框css怎么实现
    1/1

    PHP中文网