如何用CSS制作投影效果?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用CSS制作投影效果?相关的知识，希望对你有一定的参考价值。
CSS据我所知好像没有能制作投影效果的属性。但是CSS 3有制作投影的属性：text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果；
由于浏览器兼容性问题。它们使用的方式不同；如下所示：
.box-shadow//Firefox4.0-
-moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
//Safariand Google chrome10.0-
-webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
参数介绍：
投影方式：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X轴偏移量：阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y轴偏移量：阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
同时为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。
h1 filter:dropshadow(color=gray, offx=5, offy=-5, positive=1);
DropShadow(Color=gray, OffX=5, OffY=-5, Positive=1)。Dropshadow滤镜有四个参数，它们的含义为：
“Color”：代表投射阴影的颜色，我在本例中用的是“gray” ，但在实际应用中往往是用十六进制的颜色代码，如#FF0000为红色等等；
“offx”和“offy”：分别是X方向和Y方向阴影的偏移量，它必须用整数值，如果是正整数，那么表示阴影向X轴的右方向和Y轴的下方向。若是负整数值，阴影的方向正好相反。另外“offx”和“offy”数值的大小决定了阴影离开对象的距离；
“Positive”参数：是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果。这句话可能不大好理解，不要着急，看了后面的例子，你就会明白的。
对文字加载Dropshadow滤镜比较方便的办法，是把Dropshadow滤镜加载到文字所在的表格单元格< td >上。从上面的效果图，我们可以看出当文字比较小时，使用Dropshadow的效果不太好，所以一般用于制作标题字。 参考技术B <html>
<head>
<title>My project</title>
<meta http-equiv="Content-Type" c />
<style>
body
margin: 0px;
padding: 20px;
font-family: verdana;
font-size: 12px;
/* CSS container shadow */
#shadow-container
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container
position: relative;
left: -1px;
top: -1px;
#shadow-container .shadow1
background: #F1F0F1;
#shadow-container .shadow2
background: #DBDADB;
#shadow-container .shadow3
background: #B8B6B8;
#shadow-container .container
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
/* CSS container shadow */
</style>
</head>
<body>
<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="container">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
</div>
</div>
<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="container">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
</div>
</div>
</body>
</html> 参考技术C css中有一个滤镜效果，可以做投影，不过这个投影IE支持，火狐不支持，所以建议你不要用
如何用css使箭头垂直变窄？
【中文标题】如何用css使箭头垂直变窄？【英文标题】：How to make arrow narrower vertically with css? 【发布时间】：2016-12-05 02:06:53 【问题描述】：如何使用 CSS 制作这种形状和悬停效果？我可以制作这种形状，但无法添加悬停效果。任何人，请给我建议。
这是我的代码
【问题讨论】：
【参考方案1】：我希望这会有所帮助
.my-icon
position: relative;
float: left;
.my-icon > i
display: inline-block;
width: 0px;
height: 0;
position: relative;
line-height: 0;
border: 2.69em solid transparent;
border-left: 2.69em solid #efefef;
right: 0px;
top: 0px;
display: inline;
float: right;
.my-icon > i+i
display: inline-block;
width: 50px;
height: 0;
line-height: 0;
border: 1.5em solid #efefef;
border-bottom: 1.5em solid #efefef;
left: 0em;
top: 1.2em;
display: inline;
.my-icon:hover i:nth-child(2)
border: 1.5em solid red;
color: #fff;
cursor: pointer;
.my-icon:hover i:first-child
border-left: 2.69em solid red;
cursor: pointer;
<i class="my-icon">
<i></i>
<i>Item</i>
</i>【讨论】：
以上是关于如何用CSS制作投影效果?的主要内容，如果未能解决你的问题，请参考以下文章