CSS 曲线阴影


效果图

代码

<!DOCTYPE html>
<html>
    <head>
        <title>CSS 曲线阴影</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <style type="text/css">

            .uSelect{
                list-style:none;
                margin:0px;
            }

            .panel{
                border: 1px solid Gainsboro;
                border-radius: 3px;
                padding: 5px;
            }

            .title{
                background-repeat: no-repeat;
                background-position:right center;
                background-image:url('upp.png');
                height:24px;
                font-size: 20px;
                margin-top: 2px;
                margin-right: 5px;
                cursor:pointer;
                -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
            }

            .uOption {
                background-repeat: no-repeat;
                background-position:3px center;
                height:24px;
                text-indent: 30px;
                line-height:30px;
                font-size: 18px;
                border: 1px solid Gainsboro;
                background-color: Gainsboro;
                border-radius: 6px;
                margin:5px;
                padding:6px;
                color: DeepSkyBlue;
                margin-left: -40px;
                cursor:pointer;
                -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
            }

            .Selected{
                background-image:url('checked.png') ;
            }

            .UnSelected{
                background-image:url('unchecked.png');
            }

            .wrap{
                /*width: 50%;*/
                height: 200px;
                background-color: #fff;
                margin: 50px auto;
                position: relative;
            }

            .effect{
                -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset;
                -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset;
                -o-box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset;
                -mz-box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset;
                box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset;
            }

            .effect:before, .effect:after{
                content: "";
                background-color: red;
                position: absolute;
                z-index: -1;
                left: 10px;
                right: 10px;
                top: 50%;
                bottom: 0px;
                -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
                -moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
                -o-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
                -mz-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
                box-shadow: 0px 0px 20px rgba(0,0,0,.8);
                border-radius: 50px;
            }

        </style>
        <script src="jquery-2.1.1.js"></script>
        <script>
            $(document).ready(function(){
                $('.uOption').addClass('UnSelected');
                $('.uOption').click(function(){
                    if($(this).hasClass('Selected')){
                        $(this).removeClass('Selected').addClass('UnSelected');
                    }else{
                        $(this).removeClass('UnSelected').addClass('Selected');
                    }
                });

                $('.title').click(function(){
                    $('.uSelect').slideToggle();
                });
            });
        </script>
    </head>
    <body >
        <div class="box">
            <div class="panel wrap effect">
                <div class="title">Product Category</div>
                <ul class="uSelect">
                    <li class="uOption">Product1</li>
                    <li class="uOption">Product2</li>
                </ul>
            </div>
        </div>
    </body>
</html>
站内公告