前端大本营

HTML5,CSS3,Responsive,资料站

box-shadow 说明

box-shadow属性,为DIV元素添加阴影效果。 box-shadow属性,以以下方式添加阴影 box-shadow:10px 10px; box-shadow:10px 10px 10px rgba(0,0,0,0.4); box-shadow:10px 10px 10px 10px rgba(0,0,0,0.4); box-shadow:10px 10px 10px 10px rgba(0,0,0,0.4) inset; inset值设定的场合, 阴影添加在内测。 阴影的值可以有2个至4个,颜色可以任意选择。 阴影的值省略的时候默认为0,如果颜色省略的时候,系统会替代用户选择阴影颜色。多个阴影指定的场合,使用,号来分割。 第一个值的值为 水平方向影子距DIV的距离 正值为右侧偏移,负值为左侧偏移。 第二个值的值为 垂直方向影子距DIV的距离 正值为向下偏移,负值为向上偏移。 第三个值的值为 渐变值的距离 不能指定负值,值越大的场合阴影的边缘就渐变越强越模糊。 值为0时,则阴影为纯色。 第四个值的值为 渐变的范围, 正值为全方位扩大, 负值为缩小。 inset值为 阴影为内测还是外侧 还有,如果想给文本添加阴影的时候,请使用text-shadow属性。

属性值

none DIV要素不添加阴影(默认值)。
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>box-decoration-break</title>
<style>
p.sample1 {box -shadow: 10px 10px;} 
p.sample2 {box -shadow: 10px 10px 10px rgba(0,0,0,0.4);}	
p.sample3 {box -shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);}	
p.sample4 {box -shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;}
p.sample1, p.sample2, p.sample3, p.sample4 {
width:500px; height:50px;	
background-color:yellow;
border:solid 10px orange;
}
</style>

</head>

<body>
<p class="sample1">box- shadow: 10px 10px;</p> 
<p class="sample2">box- shadow: 10px 10px 10px rgba(0,0,0,0.4);</p>
<p class="sample3">box- shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);</p>
<p class="sample4">box- shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;</p>	
</body>
</html>
实例图  box-shadow
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in DIV块表示 | box-shadow DIV添加阴影 —— CSS3 参考 DIV块表示已关闭评论

box-decoration-break 说明

box-decoration-break属性,指DIV换行时的变现形式。 DIV换页,换行时被分割或是inline要素分割时,表现为断开表示(slice),还是分开的两个部分使用统一样式背景(slice). 以下为box-decoration-break属性指定后的表示结果, 左侧为slice, 右侧围clone。 box-decoration-break

属性值

slice 分开部分border,padding都不能插入,圆角边框不能连续,图片边框对应整体DIV进行渲染,此值对应的DIV整体,分割后也看做为一个整体。(默认值) clone 分开部分border,padding,圆角,图片边框,背景都能够对应。 no-repeat指定的背景也会一样。说白了就是讲一个整体分成了两个相同的个体。
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>box- decoration -break</title>
<style>
div.sample1 {
width:400px; height:300px; border:double 10px #000099; 
background-image:url("images/bg_gradation.png");
background-repeat:no-repeat;
box-decoration-break:slice;
}

div.sample1 p {
page-break-before:always; 
page-break-after:always;
} 

div.sample2 {
width:400px; height:300px; border:double 10px #000099; 
background-image:url("images/bg_gradation.png");
background-repeat:no-repeat;
box-decoration-break:clone;
}

div.sample2 p {
page-break-before:always; 
page-break-after:always;
}	
</style>

</head>

<body>
<div class="sample1">
<p>box- decoration -break:slice</p>
</div>

<div class="sample2">
<p>box- decoration -break:clone;</p>	
</div>

</body>
</html>

实例图  box-decoration-break
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in DIV块表示 | box-decoration-break DIV换行表示 —— CSS3 参考 DIV块表示已关闭评论