css3渐变
2018-02-01 本文已影响0人
张正yi
一.线性渐变linear-gradient （向下/向上/向左/向右/对角方向）
1.使用方法：
background:-webkit-linear-gradient(red,blue);
background:-moz-linear-gradient(red,blue);
background:linear-gradient(red,blue);
2.语法：
// 1:基本用法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
// direction可以为left,right,bottom,top也可以为left top 表示左上角。
// 2 使用角度
background: linear-gradient(angle, color-stop1, color-stop2);
// 如 0deg，90deg
3.补充
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。如下：
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
二.径向渐变radial-gradient （由它们的中心定义）
1.使用方法：
background:-webkit-radial-gradient(red,blue);
background:-webkit-radial-gradient(100px 50px,circle,red,blue);
//形状： ellipse、circle或者具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖
// (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
// firefox目前只支持关键字
2.语法：
background: radial-gradient(center, shape size, start-color, ..., last-color);
// 径向渐变 - 颜色结点均匀分布（默认情况下）
// shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
实例1：使用linear-gradient实现切角画册
关键代码：(四个切角)
background: -webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
使用到的知识点（补充）
水平居中
1、text-align: center.
这个大家一般都用过，我就稍微扯一点：只要父级的div设置了这个属性，里面的文字就会居中（包括图片）,这个属性只对行内元素起作用。
如果想要居中的是块级元素，它就无能为力了，要么把这个块级元素display: inline-block;要么换另一种方法。
.box-wrap {
text-align: center;
}
.box {
display:inline-block;
}
要点：要居中的必须是行内元素才有作用
2、margin： 0 auto;
这个算是一个大招了，想让谁居中，就给谁设置上这个属性，左右居中妥了。即使父级使用了绝对定位或者相对定位，也是妥妥的好使。但是必须加上宽度width，否则白瞎。
.box {
margin: 0 auto;
width: 100px;
}
要点：
1、必须给要居中的元素设置宽度
2、这个家伙不能是浮动元素，否则居中失效
3、没有声明DOCTYPE会导致居中失效
具体实现：
效果如下：
1.pic.jpg
17.pic.jpg
如下代码，根据linear-gradient弄出四个切角，并改为透明色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linear-gradient</title>
<style>
.main {
position: relative;
width: 520px;
height: 720px;
margin: 100px auto;
text-align: center;
background-color: #e3e3e3;
border-radius: 20px;
}
.tucked-corners-top {
position: relative;
display: inline-block;
width: 400px;
min-height: 200px;
margin: 40px auto;
padding: 20px;
background-color: #FFF;
background: -webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
background: -moz-linear-gradient(45deg, transparent 10px, #fff 10px),
-moz-linear-gradient(135deg, transparent 10px, #fff 10px),
-moz-linear-gradient(225deg, transparent 10px, #fff 10px),
-moz-linear-gradient(315deg, transparent 10px, #fff 10px);
background: -o-linear-gradient(45deg, transparent 10px, #fff 10px),
-o-linear-gradient(135deg, transparent 10px, #fff 10px),
-o-linear-gradient(225deg, transparent 10px, #fff 10px),
-o-linear-gradient(315deg, transparent 10px, #fff 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
-moz-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div class="main">
<div class="tucked-corners-top">
<div class="tucked-corners-bottom">
<img src="练习/a.jpg" height="600" width="400"/>
</div>
</div>
</div>
</body>
</html>
为达到更好的效果，添加如下代码：
[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
content: '';
position: absolute;
height: 20px;
width: 80px;
-webkit-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: none \9; /* IE9 */
}
.tucked-corners-top::before,
.tucked-corners-top::after {
top: -10px;
}
.tucked-corners-bottom::before,
.tucked-corners-bottom::after {
bottom: -10px;
}
.tucked-corners-top::before,
.tucked-corners-bottom::before {
left: -42px;
}
.tucked-corners-top::after,
.tucked-corners-bottom::after {
right: -42px;
}
.tucked-corners-top::before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tucked-corners-top::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.tucked-corners-bottom::before {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.tucked-corners-bottom::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
实例2:利用css3径向渐变做一张优惠券
关键代码：
background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
background-size: 15px 15px;
background-position: 9px 3px;
具体实现如下：
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>
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;
}
效果如下：
18.pic.jpg
