Question

有没有办法像使用CSS一样制作相同的风格？

Answer 1

HTML5允许我们在任何元素上绘制多个背景图像。我们可以使用CSS3的linear-gradient()和repeating-linear-gradient()函数创建2个背景图像，并在相应的元素上绘制它们。

以下代码将创建您需要的背景：

#header {
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.15),
                                                        rgba(255,255,255,0.15) 15px,
                                                        transparent 15px,
                                                        transparent 25px),
                      linear-gradient(to bottom, brown, red);
}

注意： background-image属性中的图片顺序非常重要。交换它们不会产生你需要的效果。

输出图片：

工作演示：

#header {
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 15px, transparent 15px, transparent 25px), linear-gradient(to bottom, brown, red);
  height: 80px;
  border-radius: 5px 5px 0 0;
}

<header id="header"></header>

Answer 2

尝试以下CSS

 <div class="meter red">
      <span style="width: 25%"></span>
    </div>

.meter { 
    height: 20px;  /* Can be anything */
    position: relative;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.red > span {
  background-color: #f0a3a3;
  background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}

.meter > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

Css - 创建标题渐变和模式

2 个答案: