背景颜色渐变 css实现三角图标 文字阴影 手风琴效果实现

 

涉及到的样式：

• 背景渐变

background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));

• 文字阴影 

text-shadow: 2px 2px 2px #aeaeae;

•  元素过渡效果

transition: height 0.5s ease-in;

利用:target 属性设置鼠标点击后下拉 <p>元素的显示与隐藏

完整代码：

        	.accordionmenu {
				background: #fff;
				color: #424242;
				font: 12px Arial, Helvetica, sans-serif;
				margin: 0 auto;
				padding: 10px;
				width: 500px;
			}

			.accordionmenu h2 {
				margin: 5px 0;
				padding: 0;
				position: relative;
			}

			.accordionmenu h2:before {
				/*制作向下三角形效果*/
				border: 5px solid #fff;
				border-color: #fff transparent transparent;
				content: "";
				height: 0;
				position: absolute;
				right: 10px;
				top: 15px;
				width: 0;
			}

			.accordionmenu h2 a {
				/*制作手风琴标题栏效果*/
				background: #8f8f8f;
				background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
				border-radius: 5px;
				color: #424242;
				display: block;
				font-size: 13px;
				margin: 0;
				padding: 10px;
				text-shadow: 2px 2px 2px #aeaeae;
				text-decoration: none;
			}

			.accordionmenu :target h2 a,
			/*目标标题栏的效果*/
			.accordionmenu h2 a:focus,
			.accordionmenu h2 a:hover,
			.accordionmenu h2 a:active {
				color: #fff;
				background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
			}

			.accordionmenu p {
				/*标题栏对应的内容*/
				margin: 0;
				height: 0;
				/* 默认栏目内容高度为0，达到隐藏效果*/
				overflow: hidden;
				padding: 0 10px;
				-webkit-transition: height 0.5s ease-in;
			}

			/*这部分是显示内容的关键代码*/
			.accordionmenu :target p {
				/*展开对应目标内容*/
				height: 100px;
				/*显示对应目标内容*/
				overflow: auto;
			}

			.accordionmenu :target h2:before {
				/*展开时标题三角效果*/
				border-color: transparent transparent #fff;
			}

 

        <div class="accordionmenu">
			<div class="menusection" id="brand">
				<h2><a href="#brand">Brand</a></h2>
				<p>Lorem ipsum dolor. . .</p>
			</div>
			<div class="menusection" id="promotion">
				<h2><a href="#promotion">promotion</a></h2>
				<p>Lorem ipsum dolor sit amet. . .</p>
			</div>
			<div class="menusection" id="event">
				<h2><a href="#event">event</a></h2>
				<p>Lorem ipsum dolor. . .</p>
			</div>
		</div>