css3背景颜色渐变(Gradients)属性设置方法_365体育备用网址官网资讯

css3背景颜色渐变(Gradients)属性设置方法

文章来源:365jz.com     点击数:65    更新时间:2017-12-22 13:42   参与评论

CSS3渐变(Gradients)能够让你在两个或多个指定颜色之间显示平稳的过度,包括透明度。

以前,你必须使用图像来实现这些效果。但是,通过CSS3渐变(Gradients),你能够减少下载的事情和宽带的使用。此外,渐变效果元素在放大时看起来效果更好,因为渐变(gradient)是由扫瞄器生成的。

CSS3定义了两种类型的渐变(gradients):

1.线性渐变(Linear Gradients)-向下、向上、向左、向右、对角方向:(to bottom、to top、to right、to left、to bottom right,等等)

2.径向渐变(Radial Gradients)-由他们的中心定义

扫瞄器撑腰:

表中的数字指定了完全撑腰该属性的第一个扫瞄器版本。

后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能撑腰属性的第一个版本。

属性  IE  Google   FF  Safari Opera 
linear-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
radial-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-
repeating-linear-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
repeating-radial-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

CSS3 线性渐变(linear-gradient/repeating-linear-gradient)

创建一个线性渐变,至少定义两种颜色结点,用于呈现平稳过度的颜色。同时,你也能够设置一个起点和一个方向(或一个角度)。

指定方向语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

1.线性渐变-默认情况下,从上到下

.divOne {
    width: 100px;
    height: 100px;
    background: linear-gradient(red, blue);
}
    <!--线性渐变-默认情况下,从上到下
    1.撑腰IE10及以上扫瞄器
    -->
    <div class="divOne"></div>

2.线性渐变-从左到右

.divOne {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, red, blue);
}

3.线性渐变-对角

.divOne {
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom right, red, blue);
}

指定角度语法:

如果你想要在渐变方向上做时时彩帝豪娱乐平台的操纵,你能够定义一个角度,而不用使用预定义的方向。

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

4.线性渐变-指定角度:

 
.divOne {
    background: linear-gradient(30deg, red, blue);
}

.divTwo {
        background: linear-gradient(0deg, red, blue);
}
.divThree{
        background: linear-gradient(90deg, red, blue);
}
 

5.线性渐变-使用多个颜色点:

 
        .divOne {
            background: linear-gradient( red, green, blue);
        }
        .divTwo {
            background: linear-gradient( red 10%, green 85%, blue 90%);
        }
        .divThree {
            background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
        }
 

6.线性渐变-使用透明度(Transparent),透明度的渐变

CSS3 渐变也撑腰透明度(transparency),可用于创建减弱变淡的效果。

为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数能够是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。

 
.divOne {
    background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

.divTwo {
    background: linear-gradient(to bottom, rgba(255, 255, 0, 0.3), rgba(0, 255, 255, 1));
}
 

7.反复的线性渐变-repeating-linear-gradient()

 
.divOne {
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

.divTwo {
    background: repeating-linear-gradient(to right, rgba(255, 255, 0, 0.3) 10%, rgba(0, 255, 255, 1) 20%);
}
 



 

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是二十一点游戏单机游戏直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过。那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券。

CSS3 径向渐变和线性渐变是很相似的,首先来看其语法:

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*

除了你已经在线性渐变中看到的起始地位,方向和颜色,径向梯度同意你指定渐变的形状(圆形或椭圆形)和大小(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。 颜色起止(Color stops):就像用线性渐变,你应该沿着渐变线定义渐变的起止颜色。

做优惠券最主要的代码如下,就是这三句

background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
background-size: 15px 15px;
background-position: 9px 3px;

不多解释直接上代码
优惠券

 

CSS代码

//这是公共样式
.stamp {width: 387px;height: 140px;padding: 0 10px;position: relative;overflow: hidden;}
.stamp:before {content: '';position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;}
.stamp:after {content: '';position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;}
.stamp i{position: absolute;left: 20%;top: 45px;height: 190px;width: 390px;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);}
.stamp .par{float: left;padding: 16px 15px;width: 220px;border-right:2px dashed rgba(255,255,255,.3);text-align: left;}
.stamp .par p{color:#fff;}
.stamp .par span{font-size: 50px;color:#fff;margin-right: 5px;}
.stamp .par .sign{font-size: 34px;}
.stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);}
.stamp .copy{display: inline-block;padding:21px 14px;width:100px;vertical-align: text-bottom;font-size: 30px;color:rgb(255,255,255);}
.stamp .copy p{font-size: 16px;margin-top: 15px;}
.stamp01{background: #F39B00;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);background-size: 15px 15px;background-position: 9px 3px;}
.stamp01:before{background-color:#F39B00;}
.stamp02{background: #D24161;background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);background-size: 15px 15px;background-position: 9px 3px;}
.stamp02:before{background-color:#D24161;}
.stamp03{background: #7EAB1E;background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);background-size: 15px 15px;background-position: 9px 3px;}
.stamp03:before{background-color:#7EAB1E;}
.stamp03 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
.stamp03 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
.stamp03 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}
.stamp04{width: 390px;background: #50ADD3;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);background-size: 12px 8px;background-position: -5px 10px;}
.stamp04:before{background-color:#50ADD3;left: 5px;right: 5px;}
.stamp04 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
.stamp04 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
.stamp04 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}


HTML代码

<div class="stamp stamp01">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
<i></i>
</div>
<div class="stamp stamp02">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
<i></i>
</div>
<div class="stamp stamp03">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立刻使用</a></div>
<i></i>
</div>
<div class="stamp stamp04">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立刻使用</a></div>
<i></i>
</div>




如对本文有疑问,请提交到交流下载澳门葡京娱乐场,广大热心网友会为你解答!! 点击进入下载澳门葡京娱乐场


公布评论 (65人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换二十一点游戏单机游戏
最新评论
------分隔线----------------------------
条评论
Sitemap