设置div的外部阴影(div 的阴影边框怎么搞呀)

http://www.itjxue.com  2023-01-30 04:21  来源:未知  点击次数: 

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文件,查看实现的效果,如下图所示就完成了。

(责任编辑:IT教学网)

更多

推荐Dreamweaver教程文章