CSS：表单利用border制作hover效果

列表截图.jpg

查看demo

结构

    

        

            

        
        

            

                
![](http://upload-images.jianshu.io/upload_images/6084714-f0d4402599f72568.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Search
                
![](http://upload-images.jianshu.io/upload_images/6084714-af257e32c118e3b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Upload
                
![](http://upload-images.jianshu.io/upload_images/6084714-1dcfefbb624bf6ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Location
                
![](http://upload-images.jianshu.io/upload_images/6084714-e00a608353f501be.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Contacts
            
        
    

样式

* {
    margin:0;
    padding:0;
    border: 0;
}
body {
    background: #A3CABD;
}
.menu-container {
    display: block;
    width: 300px;
    margin: 60px auto ;
    background: #ED6B3A;    /*设置头部的橙色为背景色*/
    border-radius: 6px;
    box-shadow: 3px 3px 15px rgba(0, 0, 0, .1);
    position: relative;
}
ul {
    list-style: none;
}
.menu-container .nav {
    height: 40px;    /*橙色部分高度*/
}
.menu-container .nav .settings {
    width: 20px;
    height: 20px;
    background: url(http://i.imgur.com/CLs7u.png);  
    float: right;
    margin: 10px;
}

整个menu-containe的背景色设置为头部的颜色，往下列表部分利用padding撑开高度并重新设置背景色。

.menu-container .menu ul li {
    padding: 11px 10px;  ／*撑开列表高度*／
    background: #F3F0EF;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1);
    border-top:1px solid rgba(0,0,0,0.1);
    cursor: pointer;   
    text-indent: 10px;
}
.menu-container .menu ul li:last-child {
    border-radius: 0 0 6px 6px;  ／*恢复底部的圆角*／
}
.menu-container .menu ul li a {
    text-decoration: none;
    color: #A4A3A3;
    font-size: 13px;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 1)
} 
.menu-container .menu ul li img {
   float: left;  ／*图标向左浮动，其后的文字就可以与图标在行内对齐*／
   margin: -2px 0 0 0 ;  
}
.menu-container .menu ul li:hover {
    background: #EEEBEA;
    border-left: 3px solid #ED6B3A;  
}
／*左边橙色的竖条用左边框制作*／

简单的列表，没有利用复杂属性，效果却很可爱。

[参考来源]：http://cssdeck.com/labs/1kh9boiu