文字阴影
.element{
text-shadow:1px 1px 1px #cccccc;
}
先右再下
第一个值：右侧阴影的大小
第二个值：下方阴影的大小
第三个值：模糊距离（阴影从开始变淡到完全消失的距离）
最后一个值：阴影颜色

阴影值也可以使用em或rem单位
取消文字阴影 text-shadow:none;
浮雕文字效果：不要模糊，不要水平阴影，仅在垂直方向设置1或2像素的“白影”即可

多重文字阴影，只需将两组值使用逗号分隔开即可，如：
text-shadow:0px 1px #ffffff,4px 4px 0px #dad7d7;

盒阴影
-ms-box-shadow:0px 3px 5px #444444;
-moz-box-shadow:0px 3px 5px #444444;
-webkit-box-shadow:0px 3px 5px #444444;
box-shadow:0px 3px 5px #444444;

内阴影
阴影出现在元素内部
box-shadow:inset 0 0 40px #000000;
多出来的inset告诉浏览器设置内阴影效果
可用来制作光晕效果

多重阴影
box-shadow:inset 0 0 30px hsl(0,0%,0%),
inset 0 0 70px hsla(0,97%,53%,1);
即两组值用逗号分开，这样两组阴影就会按照代码中的先后顺序从上到下应用到元素上（代码中先声明的规则，在浏览器中会覆盖下面的规则）
如上代码中，黑色覆盖红色，但两者并存
box-shadow:0px 3px 5px #444444;

线性背景渐变
background:linear-gradient(90deg,#ffffff 0%,#e4e4e4 50%,#ffffff 100%);
第一个值定义了渐变的方向，默认是一个垂直从顶部到底部的渐变。还可以使用如to top right这样的值，会产生一个朝向右上角的对角线渐变
下一个值定义了渐变的起点，包括颜色和位置。起点位置可以使用负值，这样渐变从实际可见区域之外就开始了
下一个值指的是“过渡颜色点”。可以在渐变终点之前定义更多的过渡颜色点（使用逗号分隔）
圆括号中的最后一个值始终是渐变的终点

径向背景渐变
1.background:radial-gradient(center,ellipse cover,#ffffff 72%,#dddddd 100%);
2.background:radial-gradient(25px 25px,ellipse cover,#ffffff 72%,#dddddd 100%);
第一个值，渐变起点
第二个值，渐变形状circle，或者ellipse，后跟随半径
其大小值如下：
closest-side:(渐变形状是圆形时)以距离中心点最近的一边为渐变半径，或者（渐变形状是椭圆时）以距离中心点最近的水平或垂直边为渐变半径
closest-corner:以距离中心点最近的一角为渐变半径
farthest-side:和closest-side相反，(渐变形状是圆形时)以距离中心点最远的一边为渐变半径，或者（渐变形状是椭圆时）以距离中心点最远的水平或垂直边为渐变半径
farthest-corner:以距离中心点最远的一角为渐变半径
cover:和farthest-corner完全一样
contain:和closest-side完全一样
接下来是定义渐变起点、过渡颜色点以及终点

重复渐变
1.background:repeating-linear-gradient(90deg,#ffffff 0px,red 5px);
2.background:repeating-radial-gradient(2px 2px,ellipse,red 2px,blue 10px, yellow 15px,green 20px);
加前缀repeating

背景渐变图案
body{
background-color:white;
background-image:
radial-gradient(hsla(0,0%,87%,0.31) 9px,transparent 10px),
repeating-radial-gradient(hsla(0,0%,87%,0.31) 0,
hsla(0,0%,87%,0.31) 4px,transparent 5px,
transparent 20px,hsla(0,0%,87%,0.31) 21px,
hsla(0,0%,87%,0.31) 25px,transparent 26px,
transparent 50px
);
background-size:30px 30px,90px 90px;
background-position:0 0;
}

border-radius

多重背景图片

制作一个顶部和底部使用不同背景图片的页面

<body class="headerBackgroundHere">

    <div class="footerBackground">

        <div id="container">

            <header>

            </header>

            <div id="main" role="main">

            </div>

            <footer>

            </footer>

        </div>

    </div>

</body>
body{

    background-image:url("1.png");

    background-repeat:repeat-x;

}

.footerBackground{

    background-image:url("2.png");

    background-repeat:repeat-x;

    background-position:bottom;

}

CSS3允许为一个元素设定多重背景
语法如下：
background:url(''),
url(''),
url('');
排在最前的图片在浏览器中显示时会覆盖在最上面，还可以在声明中追加背景颜色，如下：
background:url(''),
url(''),
url('') left bottom,black;
将颜色定义在最后，背景色就会显示在所有背景图片下面

背景图片大小 background-size属性
使用多重背景时，语法如下：
background-size:100% 50%,200px 400px,auto;
按照背景属性中图片的顺序对应排列。
auto：使用图片的原始大小
cover: 按照原始图片的长宽比缩放图片以填充整个元素区域
contain：按照原始图片的长宽比缩放图片以使其较长的一边适应元素大小

背景图片位置
background:url('') center,
url(''),
url('') left bottom,black;
默认是top left

CSS3--阴影，渐变，背景图片的更多相关文章

  1. CSS3全新的背景图片方案

    CSS3全新的背景图片方案 firefox支持指定一个元素的ID将它作为另一个元素的背景-moz-element(#ID), webkit系支持-webkit-canvas(xxxx)动态创建一个ca ...

  2. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  3. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  4. 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)

    原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...

  5. 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...

  6. CSS3之让背景图片全部显示

    起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下. background-size 首先声明 background-si ...

  7. CSS边框（圆角、阴影、背景图片）

    1.圆角  border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4 ...

  8. Android PNG渐变背景图片失真问题 getWindow().setFormat(PixelFormat.RGBA_8888);

    最近一个困扰很久的问题,渐变效果的png图片,设置为控件图片或background时,在eclipse上看着没有什么问题,但是在设备上运行时,可以看到明显的一圈圈的轮廓线,图片严重失真.在网上goog ...

  9. ☀【CSS3】背景图片

    CSS3全新的背景图片方案http://www.cnblogs.com/rubylouvre/p/3401125.html

  10. 第95天：CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

随机推荐

  1. Linux 查公网出口IP

    wget http://members.3322.org/dyndns/getipcat getip

  2. NDEF消息解析实例[转]

      问题:按照NDEF消息格式来解析下列Hex串? D1 02 1F 53 70 91 01 0E 54 02  65 6E 68 65 6C 6C 6F 20 77 6F  72 6C 64 51 ...

  3. vsftp 详解鸟哥版

    FTP (File Transfer Protocol) 可说是最古老的协议之一了,主要是用来进行档案的传输,尤其是大型档案的传输使用 FTP 更是方便!不过,值得注意的是,使用 FTP 来传输时,其 ...

  4. NFV 利器 FD.io VPP

    在VPP中,报文以向量批处理的形式在节点之间以流水线的方式处理,可以更加高效的利用CPU的i-cache,节点可以动态生成并加入到转发图中,节点分为多种类型,如VLIB_NODE_TYPE_INPUT ...

  5. Eclipse 打开当前文件所在的文件夹

    两种方法: 1.安装EasyExplorer插件,有了这个插件就可以很方便地打开资源文件所在的文件夹了. EasyExplorer 从 http://sourceforge.net/projects/ ...

  6. My97DatePicker -- 一个功能丰富， 而且兼容 ie 6, 7的日期选择组件

    easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON,  可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...

  7. MD5的Hash长度扩展攻击

    Hash长度扩展攻击 引子 无意中碰到一道题,大概代码是这样的 $flag = "XXXXXXXXXXXXXXXXXXXXXXX"; $secret = "XXXXXXX ...

  8. JavaScript 作用域 匿名函数 模仿块级作用域（私有作用域）

    作用域 对于有块级作用域的语言来说,for语句中定义并初始化的变量i在循环外是无法访问的. 而javascript没有块级作用域,for语句中定义的变量i在循环结束后,依旧会存在于循环外部的执行环境( ...

  9. 二十、oracle pl/sql基础

    一.pl/sql developer开发工具pl/sql developer是用于开发pl/sql块的集成开发环境(ide),它是一个独立的产品,而不是oracle的一个附带品. 二.pl/sql介绍 ...

  10. gerrit的merge conflict

    找了很多资料,最后参考http://blog.csdn.net/w_jewelry/article/details/8123639 解决的. 先把gerrit的那几个commit abandon掉. ...