现在在页面中用到最多的是图片/容器投影,文字投影;那么css中如何设置投影?下面本篇文章就来给大家介绍一下使用CSS设置投影效果的方法,希望对大家有所帮助。
图片/容器投影
可以使用box-shadow属性来设置 图片/容器投影;box-shadow 属性向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
属性值
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
spread:可选。阴影的尺寸。
color:可选。阴影的颜色。
inset:可选。将外部阴影 (outset) 改为内部阴影。
一般这样写 box-shadow:1px 1px 5px #000; 有4个值 分别指 水平方向偏移、垂直方向偏移、阴影羽化、投影颜色;
<div></div>
.box1 {
width: 500px;
height: 400px;
background: #7f0101;
box-shadow: 10px 10px 5px #500606;
box-shadow: <strong>inset</strong> 1px 1px 3px #f56a6a;
}
文字投影
可以使用text-shadow属性来设置文字投影;text-shadow 属性向文本设置阴影。
语法
text-shadow: h-shadow v-shadow blur color;
注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
属性值:
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
示例:
<h2>文字投影</h2>
.tit{font-size: 50px;maring-top:20px;text-shadow:5px 5px 4px #000;}
空心文字的效果,想必大家已经想到了吧:
.tit {
font-size: 50px;
maring-top: 20px;
text-shadow: 0px 1px 0px #000;
text-shadow: 0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
color: #fff;
}
在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果,并且可以设置多组效果。把box-shadow特性的两个偏移量设置为0,将模糊值blur也设置为0,此时增加扩张半径,就会使元素的投影变为实线边框。
这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦!包括:css3 空心文字、css3立体文字、css3发光文字、css3彩色文字、css3浮雕文字、css3纹理文字
在设计图会经常使用到的阴影效果,如何用css3来实现呢?这篇文章主要整理box-shadow的一些好看常用的投影效果。
要实现多层文字,我首先想到的是文字投影 text-shadow ,但通常 text-shadow 只能投个纯色出来。于是思路要改一下,黑色和白色层是投影,斑马条纹是真正的文字本身。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!