文字阴影
.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. IBM Minus One

    IBM Minus One Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  2. 按键精灵*ff

    Function gethttp(URL) Set objXML=CreateObject("Microsoft.XMLHTTP") objXML.Open "Get&q ...

  3. redis超时问题分析

    redis超时问题分析 06/04. 2014 Redis在分布式应用中占据着越来越重要的地位,短短的几万行代码,实现了一个高性能的数据存储服务.最近dump中心的cm8集群出现过 几次redis超时 ...

  4. GCD系列 之（二）： 多核心的性能

    全局队列的并发执行 for(id obj in array) [self doSomethingIntensiveWith:obj]; 假设,每个元素要做的事情-doSomethingIntensiv ...

  5. Jquery - UI - Dialog（转）

    jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: ...

  6. 通用mapper的使用

    通用mapper的使用 导入依赖 <dependency> <groupId>com.github.abel533</groupId> <artifactId ...

  7. VMWARE player 如何让 win2012 guest os 支持HYPER-V

    在 vm player 下安装了 win2012 r2, 但是启用 hyper-v的时候,提示不支持, 这时候要修改 Open the file Location for this Virtual M ...

  8. HDU 1331 Function Run Fun（记忆化搜索）

    Problem Description We all love recursion! Don't we? Consider a three-parameter recursive function w ...

  9. Eclipse版本区别

    各版本的区别: Eclipse IDE for Java Developers 是Eclipse的platform加上JDT插件,用来java开发的 Eclipse IDE for Java EE D ...

  10. Amazon EC2 的名词解释

    Amazon EC2   Amazon Elastic Compute Cloud (Amazon EC2) Amazon EC2 提供以下功能: 实例:虚拟计算环境 实例预配置模板/Amazon 系 ...