一 css3透明化
css3中能透过增设RGBA来同时实现透明化效用.
RGBA在RGB的此基础上重新加入Alpha地下通道,透过增设Alpha值能同时实现透明化效用.
rgba(255,255,255,0)
R:黄色值. 正整数或比率
G:绿色生态值. 自然数或比率.
B:黄色值.自然数或比率.
A:透明化度.值域0~1间.
html标识符
<nav>
<ul>
<li><a href=”#”>打气</a></li> <!–href=”#”是镜像本页的原意,会跳到页面已经开始的地方性,但不能创下页面–>
<li><a href=”#”>努力</a></li>
<li><a href=”#”>奋斗</a></li>
<li><a href=”#”>力行</a></li>
</ul>
</nav>
css标识符:
nav ul{ background:linear-gradient(90deg,rgba(255,255,255,0)0%,rgba(255,255,255,0.2)25%,rgba(255,255,255,0.2)75%,rgba(255,255,255,0)100%);
box-shadow:0 0 25px rgba(0,0,0,0.1),
inset 0 0 1px rgba(255,255,255,0.6); }
nav ul li{display:inline-block;}
nav ul li a{padding:10px; color:#FFFFFF; font-size:18px; font-family:Arial; text-decoration:none; display:block;}
运行效用如下:
由于使用了display:inline-block;所以这个无序列表显示在了一行里面.如果去掉nav ul li{display:inline-block;},当然这行标识符也可是写成 li{ display: inline-block; } li元素嵌套在nav元素和ul元素里面.
效用如下:
二 css3文本阴影
text-shadow属性定义一个或多个以逗号分隔的阴影效用,应用于当前元素的文本内容.
text-shadow属性格式:text-shadow:x-offset(必需) y-offset(必需) blur(可选) color(可选);
color值不是必需的,但由于文本阴影的默认值是透明化的,除非指定颜色值,否则不能显示文本阴影.
css标识符:
p.text-shadow{text-shadow:-10px 5px 5px red;font-size:20px; }
效用如下:
text-shadow属性能透过”,”逗号分割同时创建的多个阴影.
在css3中越先定义的阴影效用会被放置在越顶层(别的阴影的上面),反正则相反.
