css3阴影样式,css3文字阴影的属性
css3中的阴影怎么写
box-shadow 属性--设置元素阴影
创新互联从2013年成立,是专业互联网技术服务公司,拥有项目成都网站制作、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元蒲江县做网站,已为上家服务,为蒲江县各地企业和个人服务,联系电话:18982081108
实例: 向 div 元素添加 box-shadow
!DOCTYPE html
html
head
style
div{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
/style
/head
body
div/div
/body
/html
text-shadow 属性 ---设置文字阴影
!DOCTYPE html
html
head
style
h1{
text-shadow: 5px 5px 5px #FF0000;
}
/style
/head
body
h1文本阴影效果!/h1
/body
/html
css3如何实现边框阴影
我们在制作网页的时候可以用CSS3添加边框,那么如果要给边框添加阴影该怎么做呢?下面我给大家分享一下。
工具/材料
SublimeText
首先打开Sublime Text软件,新建一个HTML文档,如下图所示
然后在html文档的Body区域插入一个div,如下图所示
接下来给div定义一些样式,注意其中的box-shadow就是定义边框阴影的,如下图所示
最后我们运行界面程序,你会看到边框已经被添加上阴影了,如下图所示
CSS3-盒子阴影:box-shadow
box-shadow:none|shadow
它的值包括 6 个参数:阴影类型,X轴位移,Y轴位移,阴影大小,阴影扩展和阴影颜色。此 6 个参数可以有选择地省略。
浏览器兼容性
Webkit支持:-webkit-box-shadow
Mozilla支持:-moz-box-shadow
IE9支持:box-shadow
IE8及以前:不支持
实用实例
简单效果:
img{
height:300px;
-moz-box-shadow:5px 5px;
-webkit-box-shadow:5px 5px;
box-shadow:5px 5px;
}
虚阴影效果:
img{
height:300px;
-moz-box-shadow:2px 2px 10px #06c;
-webkit-box-shadow:2px 2px 10px #06c;
box-shadow:2px 2px 10px #06c;
}
渐变阴影效果:
img{
height:300px;
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
}
带光晕效果
img{
height:300px;
-moz-box-shadow:0 0 10px 10px #06c;
-webkit-box-shadow:0 0 10px 10px #06c;
box-shadow:0 0 10px 10px #06c;
}
内阴影效果
img{
height:300px;
-moz-box-shadow:inset 5px 5px 10px #06c;
-webkit-box-shadow: inset 5px 5px 10px #06c;
box-shadow: inset 5px 5px 10px #06c;
}
彩色阴影
img{
height:300px;
-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;
}
本文题目:css3阴影样式,css3文字阴影的属性
标题路径:http://scyanting.com/article/dsiosgc.html