Question

在CSS中，您可以设置线性渐变的颜色，位置，方向和宽度。但你也可以设定它的长度吗？不，我不想使用SVG。我对CSS解决方案感兴趣。

我想制作一个像线性渐变的眼睛虹膜：

但是使用线性渐变可以获得无限长条纹。是否可以将此条带限制在其纬度范围内？

正如我所说，我只能设置颜色，宽度，位置和方向，而不是它的长度：

.master-slider{
    width:100%;
    height:567px
}

.master-slider-inner{
    width:100%;
    max-width:1600px;
    margin:0 auto 0 auto
}

#slideshow { 
    margin: 0 auto; 
    position: relative; 
    width:100%;
    height:567px;
}

#slideshow > .slideImg { 
    position: absolute; 
}

#slideshow img{
    width:100%;
}

.banner-links {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
}

.banner-links-inner {
    width:auto;
    max-width:1000px;
    margin: 0 auto 0 auto;
}

.banner-nav {
    margin: 0;
    padding: 0;
}

.banner-nav li {
    list-style: none;
    float: left;
    font-size: 1.2em;
}

.banner-nav li a {
    color: #fff;
    text-decoration: none;
    padding: 15px 50px 15px 50px;
    display: block;
    border-right: 1px solid #fff;
}


<!--master-slider-starts--><div class="master-slider">
            <!--master-slider-inner-starts--><div class="master-slider-inner">
                <div id="slideshow">
                    <div class="slideImg">
                        <img src="images/Gift-a-spa.jpg" />
                    </div>

                    <div class="slideImg">
                        <img src="images/Gift-A-Shopping.jpg" />
                    </div>

                    <div class="slideImg">
                        <img src="images/Gift-a-Skill-Learn.jpg" />
                    </div>

                    <div class="slideImg">
                        <img src="images/Indoor-Sports.jpg" />
                    </div>

                    <!--banner-links-starts--><div class="banner-links">
            <div class="banner-links-inner">
                <!--banner-nav-starts--><ul class="banner-nav">
                <li><a class="current" href="#">Helicopter Tour Mumbai</a></li>
                <li><a href="#">JBL Flip II Offer</a></li>
                <li><a href="#">Dominos 20% Off</a></li>
                <li class="no-border"><a class="no-border" href="#">Paragliding</a></li>
            </ul><!--banner-nav-ends-->
            </div>
        </div><!--bannner-links-ends-->
                </div>
            </div><!--master-slider-inner-ends-->
        </div><!--master-slider-ends-->

https://jsfiddle.net/thadeuszlay/vy9o81dy/

Answer 1

即使在径向渐变中也可以添加开始/停止颜色：https://jsfiddle.net/vy9o81dy/2/

radial-gradient(circle at 50px 50px, transparent 5px,  green 5px,transparent 40px);

<edit for feed back/> 或者您也尝试这样做了吗？ https://jsfiddle.net/vy9o81dy/3/

是否可以在CSS中设置线性渐变的长度？

1 个答案: