这篇文章主要介绍”CSS3中常用功能的写法介绍”,在日常操作中,相信很多人在CSS3中常用功能的写法介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“CSS3中常用功能的写法介绍”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
以下就是这些写法的详细介绍。所有代码都经过了Firefox 3.6和IE 8.0的验证。
<强>一、圆角(圆角)
代码如下:
,,。box_round {
,,-moz-border-radius: 30 px;/* FF1 + */
,,-webkit-border-radius: 30 px;/* Saf3 +, Chrome */
,,border - radius: 30 px;/* Opera 10.5, IE 9 */
,,}
圆角的实现比较简单,只要设好一个半径值就可以了。遗憾的是,目前所有的IE都不支持CSS圆角,要等到IE 9才行。
<强>二、盒状阴影(盒阴影)
代码如下:
,,。box_shadow {
,,-moz-box-shadow: 3 px 3 px 4 px # ffffff;/* FF3.5 + */
,,-webkit-box-shadow: 3 px 3 px 4 px # ffffff;/* Saf3.0 +, Chrome */
,,不必:3 px 3 px 4 px # ffffff;/* Opera 10.5 (9.0 */
,,过滤器:progid: DXImageTransform.Microsoft。dropshadow (OffX=3 px, OffY=3 px,颜色=& # 39;# ffffff # 39;);/* IE6, IE7 */
,,-ms-filter:“progid: DXImageTransform.Microsoft。dropshadow (OffX=3 px, OffY=3 px,颜色=& # 39;# ffffff # 39;)“;/* IE8 */
,,}
-moz-box-shadow, -webkit-box-shadow和不必的设置是一样的,都有4个参数,含义分别为:x轴偏移值,y轴偏移值,阴影的模糊度,以及阴影颜色。
IE 6 ~ 8使用其独有的滤镜,需要设置三个参数:offX (x轴偏移值),offY (y轴偏移值),颜色(阴影颜色)。
<强>三、线性渐变(梯度)
代码如下:
,,。box_gradient {
,,背景图片:-moz-linear-gradient(顶部,# 444444,# 999999);/* FF3.6 */
,,背景图片:-webkit-gradient(线性的,离开了,离开了,颜色(0 # 444444),颜色(1 # 999999));/* Saf4 +, Chrome */
,,过滤器:progid: DXImageTransform.Microsoft.gradient (startColorstr=& # 39; # 444444 & # 39;, endColorstr=& # 39; # 999999 & # 39;, GradientType=& # 39; 0 & # 39;);/* IE6, IE7 */
,,-ms-filter:“progid: DXImageTransform.Microsoft.gradient (startColorstr=& # 39; # 444444 & # 39;, endColorstr=& # 39; # 999999 & # 39;, GradientType=& # 39; 0 & # 39;)“;/* IE8 */
,,}
先看Firefox。
代码如下:
-moz-linear-gradient(顶部,# 444444,# 999999);
-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,顶部是从上到下,左边是从左到右,如果定义成离开,那就是从左上角到右下角第。二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
代码如下:
-webkit-gradient(线性的,离开了,离开了,颜色(0 # 444444),颜色(1 # 999999));
-webkit-gradient是webkit引擎对渐变的实现,一共有五个参数。第一个参数表示渐变类型(类型),可以是线性的(线性渐变)或者径向(辐射渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如左前(左上角)和左底(左下角)。第四个和第五个参数,分别是两个颜色函数.color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。
代码如下:
DXImageTransform.Microsoft.gradient (startColorstr=& # 39; # 444444 & # 39;, endColorstr=& # 39; # 999999 & # 39;, GradientType=& # 39; 0 & # 39;);
即依靠滤镜实现渐变.startColorstr表示起点的颜色,endColorstr表示终点颜色.GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。
<强>四、透明(不透明)
正常情况下,上层的对象会覆盖下层的对象。
但是,如果将上层对象的颜色变为透明,就可以透过它看到下层对象。
代码如下:
,,。box_rgba {
,,background - color: # B4B490;
,,背景:透明;
,,过滤器:progid: DXImageTransform.Microsoft.gradient (startColorstr=& # 39; # 99 b4b490& # 39;, endColorstr=& # 39; # 99 b4b490& # 39;);/* IE6, IE7 */
