CSS

Question

我正在尝试使用 CSS 简单地获得下图中显示的效果 - 注意我使用的是 'Skeleton CSS' 框架，我需要更改内行 class但是当我弄乱文本的不透明度时 - 我只是想让带有 'You have 0...' 的弯曲内框以与图像上相同的方式出现。

 // style in external css file
.inner-row {
  border-radius: 3px;
  background-color: grey;     
}

<div class="panel stats orange sidebar row">
<div class="content">
    <div>            
    <h3>Prize Draw</h3>
        <hr />
        <div class="content">
            <div class="row inner-row">
                <div class="label">
                    You have
                </div>
                <p class="remove-bottom large">2</p>
                <div class="label">
                    prize draw entries
                </div>
                <div class="label">
                    Redeem codes for more entries
                </div>
            </div>
            <a href="/"><button class="see-prizes-btn">See Prizes</button></a>
        </div>
    </div>
</div>

Answer 1

你想试试rgba

background: rgba(192,192,192,0.65);

0.65 是您的不透明度，因此请尝试调整它以获得更好的透明度。

CSS - 尝试仅使用 CSS 根据所附图片匹配圆形阴影内部 div

CSS - Try to match rounded shaded inner div as per the attached image using just CSS

html

skeleton-css-boilerplate