html中背景加阴影，简单介绍CSS3中的阴影、背景和圆⾓边框
样式
CSS2.1 发布⾄今已有7年的历史。CSS3的出现就是增强CSS2.1的功能，减少图⽚的使⽤次数以及解决HTML页⾯上的特殊效果
当前，CSS3技术最适合在移动Web开发中使⽤的特性包括：
●增强的选择器
●阴影
●强⼤的背景设置
●圆⾓边框
阴影：
现在的CSS3样式已经⽀持阴影样式效果。⽬前可使⽤的阴影的效果分为两种：⽂本内容的阴影效果和元素的阴影效果。
box-shadow
CSS3的box-shadow属性是让元素具有阴影的效果，其语法如下：box-shadow: | color:
其中第⼀个 length 是阴影⽔平偏移值；第⼆个length值是阴影垂直偏移值；第三个值是阴影模糊值。⽔平和垂直偏移值可取正负值，如4px 或-4px.
⽬前box-shadow已经得到⼤部分现代浏览器的⽀持。可是，当我们在基于Webkit的Chrome和Safari等浏览器上使⽤该属性时，需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则要写成-moz-box-shadow的形式。
下⾯代码为使⽤box-shadow的简单⽰例，该⽰例兼容Chrome、Safari及Firefox浏览器：
p
{
/* 其他浏览器 */
box-shadow: 3px 4px 2px #000;
/
* webkit内核浏览器 */
-webkit-box-shadow: 3px 4px 2px #000;
/* Firefox浏览器 */
-moz-box-shadow: 3px 4px 2px #000;
padding:5px 4px;
}
text-shadow
text-shadow属性⽤于设置⽂本内容的阴影效果或模糊效果。
⽬前，text-shadow属性已得到Safari、Firefox、Chrome和Opera浏览器的⽀持。IE8以下的浏览器都不⽀持该特性。并且，⼤部分的移动web浏览器都得到了很好地⽀持。
text-shadow的语法和box-shadow语法基本上⼀致：
box-shadow: | color:
如下代码为text-shadow的简单实⽤⽰例：
box shadow怎么设置p
{
text-shadow: 5px -10px 5px red;
color:#666;
font-size:16px;
}
背景
在CSS3规范中，CSS3对背景属性增加了很多新特性。它既能⽀持背景的显⽰范围，也能⽀持多图⽚背景。最重要的是它可以通过属性设置，为背景颜⾊设置渐变或任何颜⾊效果，功能⾮常丰富。
CSS3对于背景属性的增强，以往我们使⽤图⽚来代替各种页⾯修饰，逐渐可以通过该背景属性替换。这些功能对页⾯的加载速度，特别是在移动设备平台，是⼀个页⾯性能的提升。
background-size
background-size属性⽤于设置背景图像的⼤⼩。
⽬前该属性已经得到了Chrome、Safair、Opera浏览器的⽀持，同时该属性也⽀持Android和IOS平台的Web浏览器。
background-size属性在不同的Web浏览器下语法⽅⾯有⼀定的差别。在基于Webkite内核的浏览器Chrome和Safari浏览器下，其写法为-webkit-background-size;
在移动开发项⽬中，建议采⽤兼容模式的写法，⽰例如下：
p
{
background-size:10px 5px;
-webkit-backgriud-size:10px 5px;
}
background
background属性在CSS3中被赋予的⾮常强⼤的功能。其中⼀个⾮常重要的功能就是多重背景。在过去，只能使⽤⼀张图⽚，⽽CSS3中可以设置多张背景图，语法如下：background:url(bg.jpg) left top no-repeat,
url(bg2.jpg) left top no-repeat;
Chrome和Safari浏览器都⽀持background属性的多重背景图⽚。由于它们是基于Webkit的浏览器，因此该功能也被Android和IOS平台的移动浏览器⽀持。但鉴于采⽤图⽚的⽅式设置背景会严重过影响在移动Web端的整体体验和性能，因此可是使⽤Webkit中的⼀种特性对其背景采⽤颜⾊渐变，⽽⾮采⽤图⽚⽅式。语法如下：-webkit-gradient(, [, ]?, [, ]? [, ]*)
type类型是指采⽤渐变类型，如线性渐变 linear 或径向渐变 radiual。如下代码：
p
{
background: -webkit-gradient(linear,0 0,0 100%,form(#ff),to(#000));
}
圆⾓边框
在CSS3中已经能够轻松的实现圆⾓效果，代码中只要定义border-radius属性就可以随意实现圆⾓效果。
到⽬前为⽌，该属性已得到Chrome、Safari、Opera以及Firefox浏览器的⽀持。但是，各浏览器之间写法有些差别，例如：Chrome和Safari浏览器需要写成-webkit-border-radius;Firefox浏览器则要写成-moz-border-radius；兼容的⽰例代码如下：
p
{
border-radius:10px 5px;
/* Firefox浏览器 */
-moz-border-radius:10px 5px;
/
* webkit 内核浏览器 */
-webkit-border-radius:10px 5px;
}
需要注意的是，border-radius属性是不允许使⽤负值的，当其中⼀个为0时，则该值对应的⾓为矩形，否则为圆⾓。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论