您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

  • CSS3阴影之box-shadow

    CSS3阴影之box-shadow

    CSS3阴影之box-shadow
    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE9.0 and Later
    内阴影效果(偏移值都为正):

    #box-shadow{ -moz-box-shadow:5px 5px 5px #999 inset; /* For Firefox3.6+ */ -webkit-box-shadow:5px 5px 5px #999 inset; /* For Chrome5+, Safari5+ */ box-shadow:5px 5px 5px #999 inset; /* For Latest Opera */}

    内阴影效果(偏移值都为负):

    #box-shadow2{ -moz-box-shadow:-5px -5px 5px #999 inset; /* For Firefox3.6+ */ -webkit-box-shadow:-5px -5px 5px #999 inset; /* For Chrome5+, Safari5+ */ box-shadow:-5px -5px 5px #999 inset; /* For Latest Opera */}

    内阴影效果(水平偏移为负,垂直偏移为负):

    #box-shadow3{ -moz-box-shadow:-5px 5px 5px #999 inset; /* For Firefox3.6+ */ -webkit-box-shadow:-5px 5px 5px #999 inset; /* For Chrome5+, Safari5+ */ box-shadow:-5px 5px 5px #999 inset; /* For Latest Opera */}

    内阴影效果(水平偏移为正,垂直偏移为负):

    #box-shadow4{ -moz-box-shadow:5px -5px 5px #999 inset; /* For Firefox3.6+ */ -webkit-box-shadow:5px -5px 5px #999 inset; /* For Chrome5+, Safari5+ */ box-shadow:5px -5px 5px #999 inset; /* For Latest Opera */}

    * 还可以试试把某个偏移值设置为0,这时阴影的效果就只是单边的

  • CSS3实现背景颜色渐变

    CSS3实现背景颜色渐变

    一. Webkit浏览器

    (1) 第一种写法:

    background:-webkit-gradient(linear ,10% 10%,100% 100%,color-stop(0.14,rgb(255,0,0)),color-stop(0.5,rgb(255,255,0)),color-stop(1,rgb(0,0,255)) );

    第一个参数:表示的是渐变的类型
    linear线性渐变
    第二个参数:分别对应x,y方向渐变的起始位置
    第三个参数:分别对应x,y方向渐变的终止位置
    第四/五/N个参数:设置渐变的位置及颜色

    (2)第二种写法:这种写法比较简单,而且效果比较自然

    background:-webkit-gradient(linear, 0 0, 0 100%, from(#2074af), to(#2c91d2));

    第一个参数:表示的是渐变的类型
    linear线性渐变
    第二个参数:分别对应x,y方向渐变的起始位置
    第三个参数:分别对应x,y方向渐变的终止位置
    第四个参数:设置了起始位置的颜色
    第五个参数:设置了终止位置的颜色

    二.Mozilla浏览器

    (1)第一种写法:

    background:-moz-linear-gradient(10 10 90deg,rgb(25,0,0) 14%,rgb(255,255,0) 50%,rgb(0,0,255) 100%);

    第一个参数:设置渐变起始位置及角度
    第二/三/四/N个参数:设置渐变的颜色和位置

    (2)第二种写法:这种写法比较简单,而且效果比较自然

     background:-moz-linear-gradient(top, #FFC3C8,#FF9298);

    第一个参数:设置渐变的起始位置
    第二个参数:设置起始位置的颜色
    第三个参数:设置终止位置的颜色

    三.IE 浏览器

    IE浏览器实现渐变只能使用IE自己的滤镜去实现

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);

    第一个参数:渐变起始位置的颜色
    第二个参数:渐变终止位置的颜色
    第三个参数:渐变的类型
    0 代表竖向渐变 1 代表横向渐变

    P.S.这里设置背景的时候不需要给background设置,直接用filter即可,不要和其他的浏览器混淆

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!