css使用伪类元素 实现 卡券圆角+虚线

1. html

           <div>
             <div className="bottom-rounded-card"></div>
             <div className="custom-border"></div>
             <div className="top-rounded-card"></div>
           </div>

2. scss 

       .top-rounded-card,
       .bottom-rounded-card {
           position: relative;
           width: 100%;
           overflow: hidden;
           background-color: var(--adm-color-background);
           border-radius: 8px;
       }
   
   
       .bottom-rounded-card {
           aspect-ratio: 1.5;
       }
   
       .bottom-rounded-card::before,
       .bottom-rounded-card::after {
           content: '';
           position: absolute;
           width: 40px;
           height: 40px;
           background-color: var(--adm-color-box);
           border-radius: 50%;
           z-index: 222;
       }
   
       .bottom-rounded-card::before {
           bottom: -20px;
           left: -20px;
       }
   
       .bottom-rounded-card::after {
           bottom: -20px;
           right: -20px;
       }
   
       .top-rounded-card {
           aspect-ratio: 2.24;
       }
   
       .top-rounded-card::before,
       .top-rounded-card::after {
           content: '';
           position: absolute;
           width: 40px;
           height: 40px;
           background-color: var(--adm-color-box);
           border-radius: 50%;
       }
   
       .top-rounded-card::before {
           top: -20px;
           left: -20px;
       }
   
       .top-rounded-card::after {
           top: -20px;
           right: -20px;
       }
   
       .custom-border {
           width: calc(100% - 40px);
           margin: 0 auto; //居中
           height: 3px;
           /* 20px的总长度，其中10px为黑色，10px为透明 */
           background: linear-gradient(to right, var(--adm-color-box) 10px, var(--adm-color-background) 10px) repeat-x;
           background-size: 20px 3px;
       }

   
    

原文地址：https://blog.csdn.net/2301_78916954/article/details/143773344

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！