1．单边阴影效果

定义元素的单边阴影效果和调协border的单边边框颜色是相似的，例如：

>

box-shadow设置单边阴影效果title></p> <p><style type="text/css"></p> <p>.box-shadow {</p> <p>width: 200px;</p> <p>height: 100px;</p> <p>border-radius: 5px;</p> <p>border: 1px solid #ccc;</p> <p>margin: 20px;</p> <p>}</p> <p>.top {</p> <p>box-shadow: 0 -2px 0 red;</p> <p>}</p> <p>.right {</p> <p>box-shadow: 2px 0 0 green;</p> <p>}</p> <p>.bottom {</p> <p>box-shadow: 0 2px 0 blue;</p> <p>}</p> <p>.left {</p> <p>box-shadow: -2px 0 0 orange;</p> <p>}</p> <p>style></p> <p>head></p> <p><body></p> <p><div class="box-shadow top">div></p> <p><div class="box-shadow right">div></p> <p><div class="box-shadow bottom">div></p> <p><div class="box-shadow left">div></p> <p>body></p> <p>html></p> <p>效果如图3-38所示。</p> <p>这个案例中，使用box-shadow给元素设置了顶边、右边、底边和左边的单边阴影效果。主要通过box-shadow的水平和垂直阴影的偏移量 来实现，其中x-offset为正值时，生成右边阴影，反之为负值时，生成左边阴影；y-offset为正值时，生成底部阴影，反之为负值时生成顶部阴 影。此例中是一个单边实影投影效果（阴影模糊半径为0），但是如果阴影的模糊半径不是0，上面的方法还能不能实现单边阴影效果呢？不急着来回答，在上面的 实例中添加一个模糊半径，例如：</p> <p>.top {</p> <p>box-shadow: 0 -2px 5px red;</p> <p>}</p> <p>.right {</p> <p>box-shadow: 2px 0 5px green;</p> <p>}</p> <p>.bottom {</p> <p>box-shadow: 0 2px 5px blue;</p> <p>}</p> <p>.left {</p> <p>box-shadow: -2px 0 5px orange;</p> <p>}</p> <p>图3-39说明，这个效果并不是理想的单边阴影效果，当box-shadow添加了5px阴影模糊半径后，阴影不再是实影投影，阴影清晰度向外扩散，更具阴影的效果。但造成了另一个问题，给元素其他三个边加上淡淡的阴影效果，可这并不是设计需要的效果。</p> <p>那究竟要怎么做呢？此时，box-shadow属性中的阴影扩展半径（spread-radius）会是一个很关键的属性，要实现单边阴影效果，必须配上这个属性（除单边实影之外）。</p> <p>.top {</p> <p>box-shadow: 0 -4px 5px -3px red;</p> <p>}</p> <p>.right {</p> <p>box-shadow: 4px 0 5px -3px green;</p> <p>}</p> <p>.bottom {</p> <p>box-shadow: 0 4px 5px -3px blue;</p> <p>}</p> <p>.left {</p> <p>box-shadow: -4px 0 5px -3px orange;</p> <p>}</p> </p> </div><!-- .entry-content --> </article><!-- #post-1 --> </div> </div> </div> </div><!-- #primary --> <footer class="site-footer default-footer"> <div class="footer__copyright gradient-bg"> <div class="container"> <div class="footer__copyright-text text-center"> Copyright © 2088 弘德养老游戏活动中心 - 最新网游福利资讯 All Rights Reserved. </div> <div> 友情链接 <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=gdvpk3plqch"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </div> </footer> </div><!-- #page --> <a href="#" class="trx_addons_scroll_to_top trx_addons_icon-up" title="Scroll to top"></a> <script type="text/javascript" src="/static/js/jquery.magnific-popup.min.js" id="magnific-popup-js"></script> <script type="text/javascript" src="/static/js/bootstrap.bundle.min.js" id="bootstrap-js"></script> <script type="text/javascript" src="/static/js/swiper.min.js" id="swiper-slider-js"></script> <script type="text/javascript" src="/static/js/wow.min.js" id="wow-js"></script> <script type="text/javascript" src="/static/js/appear.js" id="appear-js"></script> <script type="text/javascript" src="/static/js/metisMenu.min.js" id="metisMenu-js"></script> <script type="text/javascript" src="/static/js/cursor.js" id="cursor-js"></script> <script type="text/javascript" src="/static/js/jquery.marquee.min.js" id="marquee-js"></script> <script type="text/javascript" src="/static/js/parallax-scroll.js" id="parallax-scroll-js"></script> <script type="text/javascript" src="/static/js/easing.min.js" id="easing-js"></script> <script type="text/javascript" src="/static/js/scrollspy.js" id="scrollspy-js"></script> <script type="text/javascript" src="/static/js/main.js" id="helax-main-js"></script> <script type="text/javascript" src="/static/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <!-- <script type="text/javascript" id="trx_addons-js-extra"> /* <![CDATA[ */ var TRX_ADDONS_STORAGE = { "admin_mode": "", "ajax_url": "http:\/\/wp.8887.top\/wp-admin\/admin-ajax.php", "ajax_nonce": "71c6ddac4e", "site_url": "http:\/\/wp.8887.top", "post_id": "1", "vc_edit_mode": "", "is_preview": "", "is_preview_gb": "", "is_preview_elm": "", "popup_engine": "magnific", "scroll_progress": "hide", "hide_fixed_rows": "1", "smooth_scroll": "", "animate_inner_links": "0", "disable_animation_on_mobile": "1", "add_target_blank": "0", "menu_collapse": "0", "menu_collapse_icon": "trx_addons_icon-ellipsis-vert", "menu_stretch": "0", "resize_tag_video": "", "resize_tag_iframe": "1", "user_logged_in": "", "theme_slug": "helax", "theme_bg_color": "", "theme_accent_color": "#efa758", "page_wrap_class": ".page_wrap", "columns_wrap_class": "trx_addons_columns_wrap", "columns_in_single_row_class": "columns_in_single_row", "column_class_template": "trx_addons_column-$1_$2", "email_mask": "^([a-zA-Z0-9_\\-]+\\.)*[a-zA-Z0-9_\\-]+@[a-zA-Z0-9_\\-]+(\\.[a-zA-Z0-9_\\-]+)*\\.[a-zA-Z0-9]{2,12}$", "mobile_breakpoint_fixedrows_off": "768", "mobile_breakpoint_fixedcolumns_off": "768", "mobile_breakpoint_stacksections_off": "768", "mobile_breakpoint_scroll_lag_off": "768", "mobile_breakpoint_fullheight_off": "1025", "mobile_breakpoint_mousehelper_off": "1025", "msg_caption_yes": "Yes", "msg_caption_no": "No", "msg_caption_ok": "OK", "msg_caption_accept": "Accept", "msg_caption_apply": "Apply", "msg_caption_cancel": "Cancel", "msg_caption_attention": "Attention!", "msg_caption_warning": "Warning!", "msg_ajax_error": "Invalid server answer!", "msg_magnific_loading": "Loading image", "msg_magnific_error": "Error loading image", "msg_magnific_close": "Close (Esc)", "msg_error_like": "Error saving your like! Please, try again later.", "msg_field_name_empty": "The name can't be empty", "msg_field_email_empty": "Too short (or empty) email address", "msg_field_email_not_valid": "Invalid email address", "msg_field_text_empty": "The message text can't be empty", "msg_search_error": "Search error! Try again later.", "msg_send_complete": "Send message complete!", "msg_send_error": "Transmit failed!", "msg_validation_error": "Error data validation!", "msg_name_empty": "The name can't be empty", "msg_name_long": "Too long name", "msg_email_empty": "Too short (or empty) email address", "msg_email_long": "E-mail address is too long", "msg_email_not_valid": "E-mail address is invalid", "msg_text_empty": "The message text can't be empty", "msg_copied": "Copied!", "ajax_views": "", "menu_cache": [], "login_via_ajax": "1", "double_opt_in_registration": "1", "msg_login_empty": "The Login field can't be empty", "msg_login_long": "The Login field is too long", "msg_password_empty": "The password can't be empty and shorter then 4 characters", "msg_password_long": "The password is too long", "msg_login_success": "Login success! The page should be reloaded in 3 sec.", "msg_login_error": "Login failed!", "msg_not_agree": "Please, read and check 'Terms and Conditions'", "msg_password_not_equal": "The passwords in both fields are not equal", "msg_registration_success": "Thank you for registering. Please confirm registration by clicking on the link in the letter sent to the specified email.", "msg_registration_error": "Registration failed!", "shapes_url": "", "ai_helper_sc_igenerator_openai_sizes": [], "msg_ai_helper_download": "Download", "msg_ai_helper_download_error": "Error", "msg_ai_helper_download_expired": "The generated image cache timed out. The download link is no longer valid.<br>But you can still download the image by right-clicking on it and selecting \"Save Image As...\"", "msg_ai_helper_igenerator_disabled": "Image generation is not available in edit mode!", "msg_sc_googlemap_not_avail": "Googlemap service is not available", "msg_sc_googlemap_geocoder_error": "Error while geocode address", "slider_round_lengths": "" }; /* ]]> */ </script> --> <script type="text/javascript" src="/static/js/__scripts.js" id="trx_addons-js"></script> </body> </html>