<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3线性渐变——用关键字设置渐变方向</title>
<style type="text/css" media="screen">
body{
font-family: "Microsoft YaHei";
font-size:16px;
}
div {
width: 250px;
height: 150px;
border: 1px solid #666;
line-height: 150px;
text-align: center;
font-weight: 900;
font-size: 15px;
color: #fff;
margin: 10px;
float:left;
}
div:nth-child(2n+1){
clear:left
}
/*向左上角渐变*/
.toLeft{
background-image:-webkit-linear-gradient(to left, orange, green);
background-image:linear-gradient(to left, orange, green);
}
.toRight{
background-image:-webkit-linear-gradient(to right, orange, green);
background-image:linear-gradient(to right, orange, green);
}
.toTop{
background:-webkit-linear-gradient(to top, orange, green);
background:linear-gradient(to top, orange, green);
}
.toBottom{
background: -webkit-linear-gradient(to bottom, orange, green);
background: linear-gradient(to bottom, orange, green);
}
.toTopLeft {
background-image:-webkit-linear-gradient(to top left, orange, green);
background-image:linear-gradient(to top left,orange,green);
}
.toLeftTop {
background-image:-webkit-linear-gradient(to left top, orange, green);
background-image:linear-gradient(to left top,orange,green);
}
/*向右上角渐变*/
.toTopRight{
background-image:-webkit-linear-gradient(to top right, orange, green);
background-image:linear-gradient(to top right,orange,green);
}
.toRightTop {
background-image:-webkit-linear-gradient(to right top, orange, green);
background-image:linear-gradient(to right top,orange,green);
}
/*向左下角渐变*/
.toBottomLeft {
background-image:-webkit-linear-gradient(to bottom left, orange, green);
background-image:linear-gradient(to bottom left,orange,green);
}
.toLeftBottom {
background-image:-webkit-linear-gradient(to left bottom, orange, green);
background-image:linear-gradient(to left bottom,orange,green);
}
/*向右下角渐变*/
.toBottomRight {
background-image:-webkit-linear-gradient(to bottom right, orange, green);
background-image:linear-gradient(to bottom right,orange,green);
}
.toRightBottom {
background-image:-webkit-linear-gradient(to right bottom, orange, green);
background-image:linear-gradient(to right bottom,orange,green);
}
</style>
</head>
<body>
<h1>CSS3线性渐变——用关键字设置渐变方向(orange, green) 关键字中的to可省略</h1>
<hr>
<div class="toLeft">使用关键词:to Left</div>
<div class="toRight">使用关键词:to Right</div>
<div class="toTop">使用关键词:to Top</div>
<div class="toBottom">使用关键词:to Bottom</div>
<div class="toTopLeft">使用关键词:to Top Left</div>
<div class="toLeftTop">使用关键词:to Left Top</div>
<div class="toTopRight">使用关键词:to Top Right</div>
<div class="toRightTop">使用关键词:to Right Top</div>
<div class="toBottomLeft">使用关键词:to Bottom Left</div>
<div class="toLeftBottom">使用关键词:to Left Bottom</div>
<div class="toBottomRight">使用关键词:to Bottom Right</div>
<div class="toRightBottom">使用关键词:to Right Bottom</div>
</body>
</html>
CSS3线性渐变——用关键字设置渐变方向
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- CSS中的linear gradient(线性渐变)可能会导致各种各样的怪异和怪异的结果。其中的一些怪异在于它的语...
- 月亮是一个不成熟的想法在自己镶上不规则银边的云海中沉浮。夜在努力变得更黑一些以更符合身份。蛐蛐叫得越来越无精打采像...