《CSS3实战》笔记--渐变设计（三)

IE浏览器引擎的CSS渐变实现方法

IE并不支持CSS渐变，但是提供了渐变滤镜，可以用来实现简单的渐变效果。

基本语法

该参数的参数说明如下：

enabled:设置或检索滤镜是否激活。可选布尔值，包括 true 和 false，默认值为 true ，表示激活状态。

startColor ：设置或检索色彩渐变的开始颜色和透明度。可选项，其格式为#AARRGGBB。AA，RR，GG，BB为十六进制正整数，取值范围为00~FF。RR指定红色值，GG指定绿色值，BB指定蓝色值，AA指定透明度，00是完全透明，FF是完全不透明。超出取值范围的值将被恢复为默认值。取值范围为#FF0000~#FFFFFF，默认值为#FF0000FF，即不透明蓝色。

EndColorStr : 设置或检索色彩渐变的结束颜色和透明度。默认值为#FF000000，即不透明黑色。

IE 渐变滤镜实战应用

利用IE滤镜设计渐变背景，然后通过背景图像设计图文插画效果。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE浏览器引擎的CSS渐变实现方法</title>
<style type="text/css">
body {
 padding:1em;/让渐变背景填充整个页面/
 margin:0;
 text-align:center;
 /*为网页设计垂直渐变背景*/
 filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#9999FF, endColorStr=#ffffff);
}
h1 {/*标题样式*/
 color:white;
 font-size:18px;
 height:45px;
 line-height:65px;/*控制文本显示位置*/
 /*以绝地定位方式实现块元素居中显示*/
 position:absolute;
 left:50%;
 margin-left:-150px;
 padding-left:50px;
 border-bottom:solid 2px #c72223;
 /*为标题插入一个装饰图标*/
 background:url(images/icon4.png) no-repeat left center;
}
ul {/*列表框样式*/
 /*清除列表默认样式*/
 list-style-type:none;
 margin:90px 0 0 0;
 padding:0;
 background:url(images/bg6.png) no-repeat right bottom;/*设计插图背景*/
 clear:both;
 text-align:left;/*恢复默认对齐方式*/
}
li {
 line-height:1.5em;
 margin:6px auto;
 /*为列表项设计个性化的列表图标*/
 font-size:14px;
 background:url(images/icon3.png) no-repeat left 3px;
 padding-left:20px;
}
</style>
</head>

<body>
<h1>喜欢是一种心情，爱是一种感受</h1>
<ul>
 <li>有一种爱叫痴缠，比如很多人对张国荣的,有时候这样真的挺好，没有比爱一个故人更安全和永恒的了。</li>
 <li>有一种爱叫迷恋，某一时间里，忽然发现自己迷上某个人或某种感觉，但那不会长久。有时候迷恋会转化成爱。</li>
 <li>爱里面一定有迷恋、有喜欢。可迷恋、喜欢都不是爱。</li>
 <li>当自己终于明白什么是爱的时候，往往生命去了大半。人生路上能遇上一个真正爱自己的人，是机缘。</li>
 <li>有时候，爱是一瞬间的感觉，爱并不能长久保留，如果两人经营得好才会长久保留下去。爱同时是脆弱的，爱会破碎。</li>
 <li>有时候，爱是一种心愿，一种可以让自己与对方更快乐的心情。一份美好的爱必定离不开包容。</li>
 <li>有时候，爱是一种自然。花开花落，云卷云舒的一点没有强求。</li>
 <li>当能够以一种平淡的心情看待感情时，爱便变得隽永。</li>
 <li>爱情有时候让人变得很苛刻，但后来又会很包容。当爱对方超过爱自己，那爱就会很包容。</li>
 <li>喜欢一个人不会对他很苛刻，因为喜欢不会有更多的要求。相反爱却是苛刻的。</li>
 <li>喜欢一个人不会为她很心痛，爱却往往是很心痛。爱是一种归属，喜欢没有归属。</li>
 <li>在喜欢与爱的边缘徘徊的人，如果尝试着离开很远，还能在某个深夜静静地想起他，想到心痛与流泪，那一定是爱了。</li>
 <li>在爱上之前可能有很长的喜欢，有时喜欢就能转化成爱，有时喜欢也会淡掉。原来人与人都是平行线上的一些点，檫肩而过很平常，向左转，向右转，下一个路口，还会有新的风景。</li>
 <li>有时候喜欢会带来遗憾，但爱情会带来伤害。这种伤害最后会变成对对方一生的祝福。但喜欢就会越来越淡，最后在心里留下一个淡漠的影子。爱比喜欢要有力量。</li>
</ul>
</body>
</html>

演示效果：

W3C标准化的CSS渐变实现方法

25个渐变背景网页设计案例欣赏

标准草案沿袭Gecko引擎的渐变设计方法：http://dev.w3.org/csswg/css3-images/#gradients

赞 (0)

相关推荐

  • 使用 stylelint检查CSS_StyleLint

    使用 stylelint检查CSS_StyleLint

    当你书写大量的CSS代码时,可能会出现不止一个的错误.可能需要某个工具来阻止你CSS书写的错误. 可能,有的时候你的错误真的是一个bug.也有可能仅仅因为草率造成的不一致或者不明确的代码风格.可能它们当中的许多看起来微不足道(取决于你的性子),但是随着代码库的增多以及时间累积,许多人使用时就会做出有丑陋的东西.事情的后果不是你可以想象的. 你尝试去控制自己.你的同事也帮助你,当你游离及时纠正你的错误.但是,你和你的同事都是错误的制造者,所以最后至少在一定程度上都不可避免的失败了.后来,你或者其他

  • 《CSS3实战》笔记--渐变设计（二)

    《CSS3实战》笔记--渐变设计（二)

    Gecko引擎的CSS渐变设计直线渐变基本语法 -moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*) 参数说明: <point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right 关键字定义 x 轴坐标,top,center 和 bottom 关键字定义 y 轴坐标.当指定一个值时,另一个值默认为 cen

  • 《CSS3实战》笔记--渐变设计（一)

    《CSS3实战》笔记--渐变设计（一)

    基于CSS的渐变与图片渐变相比,最大的优点是便于修改,同时支持无级缩放,过渡更加自然.目前,实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器,基于Presto引擎的Opera浏览器暂时不支持渐变,基于Trident的IE虽然可以通过滤镜的方式实现,但并不提倡. Webkit引擎(Safari 4及以上版本)的CSS渐变设计 基本语法: -webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<

  • 《CSS3实战》笔记--渐变设计（三)

    《CSS3实战》笔记--渐变设计（三)

    IE浏览器引擎的CSS渐变实现方法 IE并不支持CSS渐变,但是提供了渐变滤镜,可以用来实现简单的渐变效果. 基本语法 该参数的参数说明如下: enabled:设置或检索滤镜是否激活.可选布尔值,包括 true 和 false,默认值为 true ,表示激活状态. startColor :设置或检索色彩渐变的开始颜色和透明度.可选项,其格式为#AARRGGBB.AA,RR,GG,BB为十六进制正整数,取值范围为00~FF.RR指定红色值,GG指定绿色值,BB指定蓝色值,AA指定透明度,00是完全

  • MySQL系列数据库设计三范式教程示例

    MySQL系列数据库设计三范式教程示例

    目录 一.数据库设计三范式相关知识说明 1.什么是设计范式? 2.为什么要学习数据库的三个范式? 3.三范式都有哪些? 二.数据库表的经典设计方案 一对一怎么设计? 一.数据库设计三范式相关知识说明 1.什么是设计范式? 设计表的依据,按照这三个范式设计出来的表,不会出现数据的冗余. 2.为什么要学习数据库的三个范式? 数据库的设计范式是数据库设计所需要满足的规范,满足这些规范的数据库是简洁的.结构明晰的,同时,不会发生插入(insert).删除(delete)和更新(update)操作异常.反

  • Mysql数据库设计三范式实例解析

    三范式 1NF:字段不可分; 2NF:有主键,非主键字段依赖主键; 3NF:非主键字段不能相互依赖; 解释: 1NF:原子性 字段不可再分,否则就不是关系数据库; 2NF:唯一性 一个表只说明一个事物; 3NF:每列都与主键有直接关系,不存在传递依赖; 第一范式(1NF) 即表的列的具有原子性,不可再分解,即列的信息,不能分解, 只要数据库是关系型数据库(mysql/oracle/db2/informix/sysbase/sql server),就自动的满足1NF.数据库表的每一列都是不可分割的

  • prototype Element学习笔记(Element篇三)

    一.筛选类函数 ancestors.recursivelyCollect.descendants.firstDescendant.immediateDescendants.previousSiblings.nextSiblings.siblings.match.up.down.previous.next.select.adjacent. 二.增.删.改元素类函数 insert.update.remove.replace.wrap.cleanWhitespace 三.设置元素各种属性类函数 vis

  • Android学习笔记——Menu介绍(三)

    Android学习笔记——Menu介绍(三)

    知识点 今天继续昨天没有讲完的Menu的学习,主要是Popup Menu的学习. Popup Menu(弹出式菜单) 弹出式菜单是一种固定在View上的菜单模型.主要用于以下三种情况: 为特定的内容提供溢出风格(overflow-style)的菜单进行操作. 提供其他部分的命令句(command sentence)如Add按钮可以用弹出菜单提供不同的Add的操作. 提供类似于Spinner的下拉式菜单但不保持持久的选择. 那怎样显示弹出式菜单呢? 如果你在XML文件中定义了菜单,那么以下三步就可

  • SpringCloud远程服务调用实战笔记

    笔记 在微服务中,若想要使用远程调用,需要引入spring-cloud-starter-openfeign(在使用注册中心的环境下) <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-openfeign</artifactId> <version>xxx</version> </depe

  • Bootstrap源码学习笔记之bootstrap进度条

    基本样式 要实现进度条效果要使用两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式.例如: <div class="progress"> <div class="progress-bar" style="width:40%"></div> </div> progress样式主要设置进度条容器的背景色,容器高度.间距等,pr

  • python动态网站爬虫实战(requests+xpath+demjson+redis)

    python动态网站爬虫实战(requests+xpath+demjson+redis)

    目录 前言 一.主要思路 1.观察网站 2.编写爬虫代码 二.爬虫实战 1.登陆获取cookie 三.总结 前言 之前简单学习过python爬虫基础知识,并且用过scrapy框架爬取数据,都是直接能用xpath定位到目标区域然后爬取.可这次碰到的需求是爬取一个用asp.net编写的教育网站并且将教学ppt一次性爬取下来,由于该网站部分内容渲染采用了js,所以比较难用xpath直接定位,同时发起下载ppt的请求比较难找. 经过琢磨和尝试后爬取成功,记录整个爬取思路供自己和大家学习.文章比较详细,对

随机推荐