'CSS3 실용적인 전투' 노트--그라디언트 디자인 (3)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

'CSS3 실용적인 전투' 노트--그라디언트 디자인 (3)

高洛峰

Dec 20, 2016 pm 02:36 PM

IE 브라우저 엔진에서 CSS 그라디언트를 구현하는 방법

IE는 CSS 그라디언트를 지원하지 않지만 간단한 그라디언트 효과를 얻는 데 사용할 수 있는 그라디언트 필터를 제공합니다.

기본 구문

이 매개변수의 매개변수 설명은 다음과 같습니다.

활성화: 필터 활성화 여부를 설정하거나 검색합니다. true 및 false를 포함하는 선택적 부울 값이며 기본값은 활성화 상태를 나타내는 true 입니다.

startColor: 색상 그라데이션의 시작 색상과 투명도를 설정하거나 검색합니다. #AARRGGBB 형식의 선택 사항입니다. AA, RR, GG, BB는 16진수 양의 정수이며, 값 범위는 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>

로그인 후 복사

더 많은 "CSS3 Practical" 참고사항--그라디언트 디자인(3) 관련 기사를 보려면 PHP 중국어를 참고하세요. 웹사이트!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.