HTML应用-CSDN博客

本文链接：https://blog.csdn.net/2301_77161151/article/details/134369500

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
           }
           .boss {
               width: 400px;
               height: 300px;
               border: 1px solid red;
               display: flex;
               /* flex-flow: column-reverse wrap-reverse; */
           }
           .box1 {
               width: 100px;
               height: 100px;
               background-color: pink;
               /* order: -2; */
               align-self: auto;
           }
           .box2 {
               width: 100px;
               height: 100px;
               background-color: orange;
               align-self: flex-end;
           }
           .box3 {
               width: 100px;
               height: 100px;
               background-color: aqua;
               /* order: -1; */
               align-self: center;
           }
           .boxx1 {
               width: 300px;
               height: 300px;
               border: 30px solid aqua;
               /* border-top: 10px solid red;
               border-left: 20px solid red;
               border-bottom: 30px solid red;
               border-right: 40px solid red; */
               /* border-top-width: 10px;
               border-left-width: 20px;
               border-bottom-width: 30px;
               border-right-width: 40px;
               border-top-style: solid;
               border-left-style: dashed;
               border-bottom-style: dotted;
               border-right-style: double; */
               /* none:没有边框,即忽略所有边框的宽度(默认值)
               ·solid:边框为单实线
               ·dashed:边框为虚线
               ·dotted:边框为点线
               ·double:边框为双实线 */
               /* border-top-color: red;
               border-left-color: orange;
               border-bottom-color: pink;
               border-right-color: aqua; */
               /* 圆角 */
               /* border-radius: 10px 20px 30px; */
               /* border-radius: 50%; */
               /* 边框阴影 */
               /* box-shadow: 水平垂直大小颜色; */
               /* 图形边框 */
               border-image: url(../../2.png) 15 15 round;
           }
       </style>
   </head>
   <body>
       
       
       
       <div class="boss">
           <div class="box1">11111</div>
           <div class="box2">22222</div>
           <div class="box3">33333</div>
       </div>
       <div class="boxx1"></div>
   </body>
</html>