html – CSS：框右侧的旋转投影

概述我左边有一个固定的,100％高度的菜单,我需要在它的右侧创建一个阴影效果,之后会消失. 请参见说明这一点的图. 如何创造这种效果？ 这是一个小提琴：http://jsfiddle.net/52VtD/7787/ HTML： <nav id="main-menu"> <h1>Hello</h1> <a href="#">A</a> <a href="#">B</a> <a href= 我左边有一个固定的,100％高度的菜单,我需要在它的右侧创建一个阴影效果,之后会消失.

请参见说明这一点的图.

如何创造这种效果？

这是一个小提琴：http://jsfiddle.net/52VtD/7787/

HTML：

<nav ID="main-menu">  <h1>Hello</h1>  <a href="#">A</a>  <a href="#">B</a>  <a href="#">C</a>  <a href="#">D</a></nav>

CSS：

#main-menu {    wIDth: 320px;    height: 100%;    top: 0;    z-index: 1000;    position: fixed;    background-color: #b4bac1;}

解决方法 您可以使用CSS3：Box-shadow和transform来实现这一点.

在下面的示例中,Box-shadow应用于.menuContainer的伪元素,该元素位于.menu元素下方,并使用CSS3s rotate()转换属性旋转1°.

HTML,body {  /* This is only here to allow the menu to stretch to 100% */    height: 100%;    margin: 0;}.menuContainer {    position: relative;        height: 100%;    wIDth: 100px;}.menuContainer::after {    content: "";    position: absolute;       z-index: 1;     top: -10px;    bottom: 0;    left: -7px;    background: rgba(0,0.3);    Box-shadow: 10px 0 10px 0 rgba(0,0.3);    wIDth: 100px;        transform: rotate(1deg);}.menu {    background: #f00;    height: 100%;    wIDth: 100px;    position: relative;    z-index: 2;}

<div >    <div ></div></div>

JSFiddle

总结

以上是内存溢出为你收集整理的html – CSS：框右侧的旋转投影全部内容，希望文章能够帮你解决html – CSS：框右侧的旋转投影所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。