盒子边框

最新推荐文章于 2024-03-07 19:45:00 发布

普通旧朋友

最新推荐文章于 2024-03-07 19:45:00 发布

阅读量617

点赞数 1

本文链接：https://blog.csdn.net/qq_41646730/article/details/80958563

版权

<body>

        <div class="q1"></div>
        <div class="q2"></div>

<body>

<style>
.q1{
    width: 100px;
    height: 100px;
    border-color: salmon;
    border-style: dotted;
}
 .q2{
     width: 200px;
     height: 200px;
     border-top: 3px hidden green;
     border-right: 5px bisque dotted;
     border-bottom: 10px double fuchsia;
     border-left: 12px dashed #4e4dff;

 }

</style>

效果图

备注：要求边框按照上右下左的顺序编写

常用的边框格式为：dashed() double() dotted() solid() unset() hidden() dot-dash() dot-dot-dash() groove()inset()

内边框的移动

padding

.q3{
    width: 200px;
    height: 200px;
    background-color: tomato;
   padding: 10px 20px 30px 40px;
}
.q4{
    width: 100px;
    height: 100px;
    background-color: green;
}
.q5{
    width: 50px;
    height: 50px;
    background-color: grey;
    padding-top: 20px;
    padding-right: 20px;

}

效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

普通旧朋友

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子边框

&lt;body&gt; &lt;div class="q1"&gt;&lt;/div&gt; &lt;div class="q2"&gt;&lt;/div&gt;&lt;body&gt;&lt;style&gt;.q1{ width: 100px; height: 100px; border-co
复制链接

扫一扫