收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > CSS/HTML > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

《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

CSS3實現動態翻牌效果 仿百度貼吧3D翻牌一次動畫特效
今天分享一個CSS3制作的翻牌效果,效果如下圖所示,所過把把這個效果應用于相冊肯定會很炫的。呵呵,超酷啊。一、HTML代碼:因為是CSS3實現,所以

html5手機觸屏touch事件介紹
HTML5中新添加了很多事件,但是由于他們的兼容問題不是很理想,應用實戰性不是太強,所以在這里基本省略,咱們只分享應用廣泛兼容不錯的事件,日

HTML5實戰與剖析之觸摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他們的兼容問題不是很理想,應用實戰性不是太強,所以在這里基本省略,咱們只分享應用廣泛兼容不錯的事件,日

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
手游棋牌游戏运营
pk10投注现场 天津福彩快乐十分钟 青海快三遗落号 新彊时时三星走势图 快乐十分山西福彩 云南快乐十分必赢技巧 赛车pk官网 重庆时时开奖公式 湖南快乐十分开奖详情 2018年白小姐买什么码 加拿大开奖结果走势图 山西快乐十分开奖结果今天 老时时360计划 广东快乐十分20选8技巧 新疆时时历史走势 青海快三开奖