设置div的外部阴影(div 的阴影边框怎么搞呀)
DIV+CSS设计中如何给层添加阴影
css中有一种技术,可以实现阴影.
大致思路为在要添加阴影的层外添加额外的层,分别对不同的层使用背景,通过适当的组合形成阴影效果.不过要实现这一效果需要"特制"的背景.
div class="wrapper"
div
div
img src="test.jpg" width="300" height="300" /
/div
/div
/div
.wrapper {
background: url(images/shadow.gif) no-repeat right bottom;
float: left;
}
.wrapper div {
background: url(images/mask.png) no-repeat left top !important;
background: url(images/mask.gif) no-repeat left top;
padding: 0 5px 5px 0;
float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}
.wrapper div div {
width: 300px;
height: 300ps;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}
div四周都加阴影如何改下面的代码
box-shadow 前面两个值为 纵向阴影 和 横向阴影
把这两个值都设置为 0 就是四边都有阴影
border:#074A99 0px solid;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#074A99,strength=4);/*ie*/
-moz-box-shadow: 0 0 20px #074A99;/*firefox*/
-webkit-box-shadow: 0 0 20px #074A99;/*safari或chrome*/
box-shadow: 0 0 10px #074A99;/*opera或ie9*/
如何用CSS实现DIV块的阴影效果
可以用CSS3.?不过要支持IE6的话,加载个?.htc?行为文件就好了。?什么圆角,什么阴影。全都小ks,?要的话可以M我。我写给你。
border:?1px?solid?#696;padding:?60px?0;text-align:?center;?width:?200px;
-webkit-border-radius:?8px;
-moz-border-radius:?8px;
border-radius:?8px;
-webkit-box-shadow:?#666?0px?0px?10px;
-moz-box-shadow:?#666?0px?0px?10px;
box-shadow:?#666?0px?0px?10px;background:?#EEFF99;behavior:?url(/PIE.htc);
CSS 如何实现让div的四个边框都有阴影的效果?
CSS 实现让div的四个边框都有阴影的效果:
首先:
HTML代码
h1CSS 如何实现让div的四个边框都有阴影的效果?/h1
div class="g1"
div class="g2"/div
/div
CSS代码
body{background:#f00;}
html{background:#f00;}/*html加背景色*/
.g1{
width:500px;
height:500px;
border:2px solid #fff;
margin:30px auto;
background-color:#fff;
box-sizing:border-box;
}
.g2{
width:400px;
height:400px;
margin:50px auto;
border:2px solid #000;
box-shadow:5px 5px 5px #000,5px -5px 5px #000,-5px 5px 5px #000,-5px -5px 5px #000;
}
具体效果:
CSS/DIV:两个DIV之间如何添加阴影呢
Div 添加阴影:
style type="text/css"
.mydiv{
???width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;
???filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
???-moz-box-shadow: 2px 2px 10px #909090;
???-webkit-box-shadow: 2px 2px 10px #909090;
???box-shadow:2px 2px 10px #909090;
}
/style
for IE:
direction 阴影角度 0°为从下往上 顺时针方向
strength??阴影段长度
-moz-box-shadow: 2px 2px 10px #909090;
-webkit-box-shadow: 2px 2px 10px #909090;
box-shadow:2px 2px 10px #909090;
第一个参数是x轴阴影段长度
第二个参数是y轴阴影段长度
第三个参数是往四周阴影段长度
第四个参数是阴影段颜色
div代码:
div class="mydiv"
????123123213123
/div
用css给div的border设置阴影、只要上、下、左有,右边不要阴影、请问该怎么写?
1、首先新建一个html文件,命名为test.html,使用div标签创建一个模块,用于测试。如下图所示。
2、在test.html文件内,给div添加一个class属性,属性值设置为myway。
3、然后在css标签内,通过class设置div的样式,定义它的宽度为200px,高度为200px,背景颜色为黑色。
4、接着在css标签内,再使用box-shadow属性设置div的阴影效果,其中,左边阴影为绿色,顶部阴影为蓝色,底部阴影为红色,右边阴影为黄色。
5、最后在浏览器打开test.html文件,查看实现的效果,如下图所示就完成了。