AJAX Control Toolkit——DropShadow（陰影和圓角框）

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

該控制項的效果就是可以使相應的Panel產生陰影和圓角框的效果，要說的是該控制項在CSS3來臨之際並不存在多大的意義了，因為在CSS3中同樣可以實現而且更加理想的效果。

但是要說明的是不要為目標Panel添加過多的CSS屬性，不然會出現預料之外的效果，如果你想設定內容的內邊距（padding）,建議用在Panel裡面嵌套div，在為期添加相應的CSS。

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head runat="server">
 6     <title>DropShadow</title>
 7     <style type="text/css">
 8         .content
 9         {
10             padding: 10px;
11             font-family:微軟雅黑;
12             font-size:16px;
13         }
14         .para
15         {
16              font-weight:bold;
17               font-size:14px;
18                
19             }
20             li{ padding:5px;  list-style-type:none;}
21     </style>
22 </head>
23 <body>
24     <form id="form1" runat="server">
25     <asp:ScriptManager ID="ScriptManager1" runat="server" />
26     <br />
27     <br />
28     <div>
29         <asp:Panel ID="Panel1" runat="server" BackColor="#C0C0FF" Height="450px" Width="960px">
30             <div class="content">
31                 <p>
32                     DropShadow is an extender that applies a drop shadow to an ASP.NET Panel control.
33                     The extender allows you to specify how wide the shadow is, how opaque it is, and
34                     whether the shadow should have rounded corners. For pages that let the user move
35                     or resize the panel, the DropShadow extender has a mode that will resize and reposition
36                     the shadow to match the target panel at run time.</p>
37                   
38                <li>TargetControlID</li>- The ID of the control to extend. 
39               <li> Width </li> - The width, in pixels,
40                 of the drop shadow. The default is 5. 
41                 <li>Opacity</li> 
42                 - The opacity of the drop shadow,
43                 from 0 (fully transparent) to 1.0 (fully opaque). The default is .5. 
44               <li>TrackPosition</li>- A Boolean value that specifies whether the dropshadow should track the position
45                 of the panel it is attached to. Set this property to true if the panel is absolutely
46                 positioned or if it might move at run time. The default is false. 
47               <li>Rounded</li> - A Boolean
48                 value that specifies whether the corners of the target and drop shadow should be
49                 rounded
50             </div>
51         </asp:Panel>
52         <ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1"
53             Opacity=".7" Rounded="true" Radius="12">
54         </ajaxToolkit:DropShadowExtender>
55     </div>
56     </form>
57 </body>
58 </html>

更多參數和方法請參見@http://www.asp.net/ajaxlibrary/act_DropShadow.ashx

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More