css3实现让div的四个边框都有阴影的效果

kevin-ying · 发表于 2015-8-23 13:41:53

.shadow{ box-shadow: 0 0 3px #000;}

复制代码

kevin-ying · 发表于 2015-8-23 13:46:17

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>by:kevin-ying.com</title>
<style>
form,p{margin-bottom:30px; margin-left:20px;}
.shadow,.one,.two,.three,.four,.five,.six{
height:50px;
width:280px;
border:1px solid #CCC;
}
.shadow{
-moz-box-shadow: inset 0 0 10px #CCC;
-webkit-box-shadow: inset 0 0 10px #CCC;
box-shadow: inset 0 0 10px #CCC;
}
.one{
-moz-box-shadow:5px 5px;
-webkit-box-shadow:5px 5px;
box-shadow:5px 5px;
}
.two{
-moz-box-shadow:2px 2px 10px #06c;
-webkit-box-shadow:2px 2px 10px #06c;
box-shadow:2px 2px 10px #06c;
}
.three{
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
}
.four{
-moz-box-shadow:0 0 10px 10px #06c;
-webkit-box-shadow:0 0 10px 10px #06c;
box-shadow:0 0 10px 10px #06c;
}
.five{
-moz-box-shadow:inset 5px 5px 10px #06c;
-webkit-box-shadow: inset 5px 5px 10px #06c;
box-shadow: inset 5px 5px 10px #06c;
}
.six{
-moz-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
-webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
}
</style>
</head>
<body>
<form>
输入框内阴影 <input class="shadow" type="text" name="name" />
</form>
<p class="one">简单效果:</p>
<p class="two">虚阴影效果:</p>
<p class="three">渐变阴影效果:</p>
<p class="four">带光晕效果:</p>
<p class="five">内阴影效果:</p>
<p class="six">彩色阴影:</p>
</body>
</html>

复制代码

效果:

kevin-ying · 发表于 2015-8-23 13:58:45

RGB与16进制色互转 http://tool.css-js.com/rgba.html

kevin-ying · 发表于 2015-8-23 14:19:28

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>by:kevin-ying.com</title>
<style>
body{ background-color:#F00;}
div,li,ul{ margin:0; padding:0;}
li{ list-style:none;}
#s3 {padding:20px;width:500px;margin:auto;background:#fff;background:rgba(255,235,205, 0.7);filter:Alpha(Opacity=20);box-shadow:10px 10px 20px rgba(0,0,0,0.8); border:1px #FFFCDF double;}
.s4 {width:500px;background:#fff; line-height:20px; text-align:center;}
</style>
</head>
<body>
<div id="s3">
<div class="s4">
<ul>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=701" title="DIV CSS text-transform英文字母全大写小写_CSS首字母大写" target="_blank">DIV CSS text-transform英文字母全大写小写_CSS首字母大写</a></li>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=702" title="溢出超出DIV边框的内容自动隐藏方法" target="_blank">溢出超出DIV边框的内容自动隐藏方法</a></li>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=704" title="CSS 几种被忽略但是很有意思的标签" target="_blank">CSS 几种被忽略但是很有意思的标签</a></li>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=721" title="10个顶级学习CSS的网站" target="_blank">10个顶级学习CSS的网站</a></li>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=746" title="网页设计中黄金分割线布局的应用" target="_blank">网页设计中黄金分割线布局的应用</a></li>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=765" title="自适应移动设备页面的css设计" target="_blank">自适应移动设备页面的css设计</a></li>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=827" title="利用媒体查询进行响应式设计" target="_blank">利用媒体查询进行响应式设计</a></li>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=834" title="css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况" target="_blank">css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况</a></li>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=852" title="将DIV固定在页面头部和底部" target="_blank">将DIV固定在页面头部和底部</a></li>
<li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=853" title="div圆角" target="_blank">div圆角</a></li>
</ul>
本教程来自源与生活-社区 by:www.kevin-ying.com
</div>
</div>
</body>
</html>

复制代码

效果:

关于filter:alpha()的写法

1. Alpha：设置透明度

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。

FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。

Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY：代表渐变透明效果的开始X和Y坐标。

FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。

kevin-ying · 发表于 2015-8-23 14:53:02

总之是好东西

kevin-ying · 发表于 2015-9-1 02:21:00

-moz-, -webkit-, -o-这些都是浏览器前缀。
常用前缀和浏览器的对应关系如下：

Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-

css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程，css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险，同时也会出现有的浏览器厂商支持的好，有的支持的不好，所以就用厂商前缀加以区分。
PPK建议如果已成为REC或接近REC的属性，厂商如果完全实现了w3c的test case，就不用加厂商前缀，像border-radius在ie9下就不用加前缀。

kevin-ying · 发表于 2015-9-1 02:22:38

css3 box-shadow 内阴影与外阴影

1-

box-shadow具体使用方法，语法：

E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}

复制代码

换句说：对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

取值：投放方式：默认是外阴影，

box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；

X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

-moz-box-shadow:5px 5px 5px #999 inset; -webkit-box-shadow:5px 5px 5px #999 inset; box-shadow:5px 5px 5px #999 inset;

复制代码

-moz-box-shadow:-5px -5px 5px #999 inset; -webkit-box-shadow:-5px -5px 5px #999 inset; box-shadow:-5px -5px 5px #999 inset;

复制代码

kevin-ying · 发表于 2015-9-16 16:44:51

[CSS] 纯文本查看 复制代码

filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=3);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
box-shadow:2px 2px 10px #909090;/*opera或ie9*/

		自动登录	找回密码
密码			免费注册

[CSS3] css3实现让div的四个边框都有阴影的效果

本帖被以下淘专辑推荐:

相关帖子

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

浏览过的版块