DIV CSS3 box-shadow对象盒子阴影和图片阴影

一、CSS样式单词与使用语法

1、盒子阴影样式单词：box-shadow

2、语法

p{box-shadow:001px#000inset;}

代表边框间距靠左0靠上0和1px阴影范围阴影颜色为黑色（#000），有inset代表框内阴影，不带inset代表框外阴影。

注意：

box-shadow:0px0px1px#000

第1个值为0时，代表左右边框阴影为1px范围

第1个值为正整数代表左边框阴影

第1个值为负整数代表右边框阴影

同理

第2个值为0代表上下边框阴影

第2个值为正整数代表1px阴影距离上边框多少

第1个值为负整数代表下边框阴影设置

3、浏览器兼容图

微信截图_20181016140609.png浏览器兼容一览表图

二、pCSS5案例

pCSS5分别对p盒子和图片IMG设置内阴影和外阴影为案例。

1、案例HTML代码

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>对象阴影在线演示DIVCSS5VIP</title>

<linkhref="images/style.css"rel="stylesheet"type="text/css"/>

</head>

<body>

<div>盒子对象阴影测试</div>

<divclass="box">DIV盒子内阴影</div>

<div>图片对象阴影测试</div>

<divclass="box2"><imgsrc="images/45.gif"/></div>

</body>

</html>

2、案例CSS代码

.box{box-shadow:5px2px6px#000inset;width:300px;height:80px;margin:0auto}

.box2img{box-shadow:5px2px6px#000}

分别设置p对象内阴影效果和图片外阴影效果

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c57306.shtml