AJAX Control Toolkit -- DropShadow (shadow and rounded corner box)

Source: Internet
Author: User

The effect of this control is to make the corresponding Panel produce shadow and the effect of the rounded corner frame. It is said that the control does not make much sense when CSS3 comes, because it can also be implemented in CSS3 and has better results.

However, it should be noted that you do not add too many CSS attributes to the target Panel. Otherwise, unexpected results may occur. If you want to set the content padding (padding ), we recommend that you use the nested div in the Panel to add the corresponding CSS during the duration.

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 5 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 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 shoshould 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 shocould 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 shocould 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

For more parameters and methods, see @ http://www.asp.net/ajaxlibrary/act_DropShadow.ashx

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.