CSS3中,设置文字阴影的正确写法是() [多选题] *
CSS3中,设置文字阴影的正确写法是() [多选题] *
background-color(正确答案)
background-image(正确答案)
background-repeat(正确答案)
background-position(正确答案)
css中怎么设置文字阴影滤镜效果
text-shadow: 1px 2px 3px #FF0000;数值意思是-----1px水平阴影的位置,允许负值。2px垂直阴影的位置,允许负值。3px模糊的距离。#FF0000阴影的颜色。
所有主流浏览器都支持 text-shadow 属性。IE 9 以及更早版本的浏览器不支持 text-shadow 属性。
如何用CSS实现DIV块的阴影效果
可以用CSS3的阴影属性。 不过要支持IE6的话,加载个 .htc 行为文件就好了。border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-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)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset;属性设置样式样式就可以了。前两个值(5px 5px)是水平和垂直方向的偏移量,正值阴影就会向左向下偏移,负值反之;第三个值(10px)是设置模糊距离;black就是阴影的颜色啦;最后一个inset是在元素内部创建一个阴影,也就是内阴影了;删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果,在DIV层的区域边框添加阴影效果,看上去非常形象,但是实现起来并不是太难,CSS代码比较简洁,值得我们学习。盒子阴影的CSS实现方法
做这样的CSS文字阴影效果,该怎么做?
!DOCTYPE html
html
head
meta charset="UTF-8"
meta name="description" content="" /
meta name="viewport" content="width=device-width, initial-scale=1.0"
title文字阴影/title
style
div{
background-color:#EBEBEB;
width:500px;
height:100px;
line-height:100px;
color:#E3E1E2;
font-size:40px;
font-weight:bold;
font-family:"Arial Black", Gadget, sans-serif;
text-shadow:0 1px 1px rgba(255,255,255,1),
0 -1px 1px rgba(0,0,0,.3);
}
/style
/head
body
divThis is heading/div
/body
/html
效果图:
大概就是这样子的,你再调一调就能和你的图片一样了,css3文字阴影效果只有支持css3的浏览器才能显示,比如chrome、Firefox等,IE9以下不支持。
css3 文字阴影
建议楼主多看看CSS手册。
语法:
text-shadow:none | shadow [ , shadow ]*
shadow = length{2,3} color?
默认值:none
适用于:所有元素
继承性:有
取值:
none:无阴影
length①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
length②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
length③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
color:设置对象的阴影的颜色。
!DOCTYPE html
html lang="zh-cn"
head
meta charset="utf-8" /
titletext-shadow_CSS参考手册_web前端开发参考手册系列/title
style
.test li{margin-top:10px;}
.test .mormal p{text-shadow:1px 1px rgba(0,0,0,.3);}
.test .blur p{text-shadow:1px 1px 1px rgba(0,0,0,.3);}
.test .group p{text-shadow:1px 1px 0 rgba(255,255,255,1),1px 1px 2px rgba(0,85,0,.8);}
/style
/head
body
ul class="test"
li class="mormal"
strong普通文字阴影/strong
p测试普通文字阴影效果/p
/li
li class="blur"
strong模糊文字阴影效果/strong
p测试模糊文字阴影效果/p
/li
li class="group"
strong多重模糊文字阴影效果/strong
p测试多重模糊文字阴影效果/p
/li
/ul
/body
/html