加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 电商 > 正文

CSS3 渐变(Gradients)之CSS3 线性渐变

发布时间:2020-03-15 09:59:33 所属栏目:电商 来源:站长网
导读:副标题#e# CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因

<div id="grad1"></div>  

<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>  

</body>  

</html>  

CSS3 渐变(Gradients)之CSS3 线性渐变


(3)、线性渐变 - 对角
 
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  

<html>  

<head>  

<style>  

#grad1 {   

width:500px;   

    height: 200px;   

    background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */   

    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */   

    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */   

    background: linear-gradient(to bottom right, red , blue); /* 标准的语法(必须放在最后) */   

}   

</style>  

</head>  

<body>  

<h3>线性渐变 - 对角</h3>  

<p>从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:</p>  

<div id="grad1"></div>  

<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>  

</body>  

</html>  

CSS3 渐变(Gradients)之CSS3 线性渐变

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读