利用CSS盒子模型结合div做一个花样边框

最新推荐文章于 2022-11-16 17:09:24 发布

在你隔壁的香飘飘

最新推荐文章于 2022-11-16 17:09:24 发布

阅读量569

点赞数

分类专栏： html基础入门文章标签： css html

本文链接：https://blog.csdn.net/ZYuAYuLuuu/article/details/117688572

版权

这篇博客展示了如何利用CSS盒子模型和div元素来设计复杂的边框效果。通过ID选择器定义样式，并通过层层嵌套及调整margin属性，实现了预期的边框设计。作者分享了实现此效果的代码，并邀请读者进行交流和讨论。

摘要由CSDN通过智能技术生成

最终效果如下：

需要运用div的知识，以及标签的使用，我使用的是id标签，在style中声明，引用时利用“id=XXX ”便可使用该标签样式。

层层嵌套，并设置margin位置属性,经过调试后便可达到目的，

如下附上我的代码，欢迎大家留言讨论，如要转载请注明出处，谢谢！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #bo1 {
        height: 500px;
        width: 600px;
        border: 5px dotted black;
        margin: auto;
    }
    
    #bo2 {
        height: 400px;
        width: 500px;
        border: 5px solid gray;