主页 / 问题 / 1431595
Accepted
Denis
Asked:2022-07-21 03:05:15 +0800 CST2022-07-21 03:05:15 +0800 CST

带渐变的圆角框架

  • 772

这是HTML

<div class="status_wrapp"></div>

这是CSS

.status_stars {
    display: block;
    height: 24px;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    border-image-slice: 1;
    border-width: 2px;
    -webkit-border-width: 2px;
    border-style: solid;
    border-image-source: linear-gradient(to left, #FFED4F, #FFC34F);
    border-image-source: -webkit-linear-gradient(to left, #FFED4F, #FFC34F);
}

原来是这样

在此处输入图像描述

你需要这样

在此处输入图像描述

如何制作带圆角的框架？

根据布局，一般情况下应该是这样的

在此处输入图像描述

html css

3 个回答

  1. 据我所知，border-image不能与border-radius同一类中的属性一起使用。

    您可以通过以下方式解决此问题before

    body {
  padding: 20px;
}

.circle {
  width: 200px;
  height: 75px;
  background: #673ab7;
  border-radius: 50px;
  position: relative;
  text-align: center;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

.circle::before {
  border-radius: 55px;
  position: absolute;
  content: '';
  background-image: linear-gradient(to bottom, #FFED4F 0%, #FFC34F 100%);
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  z-index: -1;
}

.circle::after {
  border-radius: 60px;
  position: absolute;
  content: '';
  background-image: linear-gradient(to bottom, #673ab7 0%, #673ab7 100%);
  top: -20px;
  left: -20px;
  bottom: -20px;
  right: -20px;
  z-index: -2;
}

.wrapp {
  display: flex;
  width: 100%;
  height: 300px;
  padding: 50px 0;
  justify-content: center;
  align-items: center;
}
    <div class="wrapp">
  <div class="circle">Тест</div>
</div>

    • 0
  2. Best Answer

    我会这样做：

    @import url('//fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');

.violet-bg {background: linear-gradient(15deg, #7785f8, #74a1d3);}
.gold-bg {background: linear-gradient(15deg, #f5bf59, #f4e556);}

.button-star {
  display: inline-block;
  border-radius: 90px;
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;
}

.button-star__border {
  border-radius: 90px;
  padding: 2px;
  box-sizing: border-box;
}

.button-star__content {
  border-radius: 90px;
  padding: 5px 15px;
  box-sizing: border-box;
  color: #ffc34f;
  text-shadow: 0 0 2px #fff;
}
    <div class="button-star violet-bg">
  <div class="button-star__border gold-bg">
    <div class="button-star__content violet-bg">
      <span class="material-symbols-outlined">star</span>
      <span class="material-symbols-outlined">star</span>
      <span class="material-symbols-outlined">star</span>
    </div>
  </div>
</div>

    • 0

  3. 这是2 个 div的变体- 由于窗台，每个“笔划”都绘制在前一个下方。代码中有注释。

    图层演示 

    .status_wrapper{
  display: inline-flex; 
  position: relative; /* для позиционирования :before */
  border-radius: 25px;
  padding: 2px; /* ширина внешней голубой обводки */
} 

.status_wrapper:before {
  content: "";
  z-index: -1; 
  position: absolute;
  top: 0px;   
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: inherit;
  background: rgb(2,0,36); /* фон обводки */
  background: linear-gradient(337deg, rgba(2,0,36,1) 0%, rgba(78,78,222,1) 35%, rgba(0,212,255,1) 100%);
}

.status_stars {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 5px 10px;
  box-sizing: border-box; /* включаем границу в размеры */
  color: gold;
  /* фон */
  background: rgb(2,0,36); 
  background: linear-gradient(337deg, rgba(2,0,36,1) 0%, rgba(78,78,222,1) 35%, rgba(0,212,255,1) 100%);
  background-clip: padding-box; /* под границей фон не рисуется */
  border: solid 2px transparent; /* делаем прозрачность для показа золотой обовдки */
  border-radius: 25px;
}
.status_stars:before {
  content: "";
  position: absolute;
  /* выступ золотой обводки из под фона */
  top: -2px;    
  right: -2px;  
  bottom: -2px; 
  left: -2px; 
  /* помещаем ее под фоном */  
  z-index: -1;  
  border-radius: inherit;
  background: linear-gradient(to right, yellow, orange); /* обводка */
}
    <div class ="status_wrapper">
  <div class="status_stars">
    <span>★★★</span>
   </div>
</div>

<div class ="status_wrapper">
  <div class="status_stars">
    <span>★★&nbsp;</span>
   </div>
</div>

<div class ="status_wrapper">
  <div class="status_stars">
    <span>★</span>
   </div>
</div>

    • 0

相关问题