How to get transparent corner using jquery corner plugin_问答_开发者

How to get transparent corner using jquery corner plugin

开发者 https://www.devze.com 2022-12-29 05:26 出处：网络

http://jquery.malsup.com/corner/ I 开发者_开发问答tried but it fills color at corners alt text http://stashbox.org/886089/11046214422-My-Desktop.png

http://jquery.malsup.com/corner/

I 开发者_开发问答tried but it fills color at corners

alt text http://stashbox.org/886089/11046214422-My-Desktop.png

in place of white i need transparent corner with 0 opacity.

I recommend you just use the CSS3 border-radius property. For browsers that don't support it, they will have square corners. This is unfortunate, but saves you a lot of trouble. I looked at many rounded-corners jQuery plugins a while ago and the bottom line is, they were all broken in some browsers in one way or another. Using CSS3 border-radius fits the idea of progressive enhancement and is easy to build and maintain.

http://methvin.com/jquery/jq-corner.html

Define an explicit background color in a parent element. Safari requires that an ancestor of the element being adorned has a background color set. Just set the body to "background: #fff" if you don't need some other color.

Don't use a background image in the parent. The adorned element effect sets pixels on the corners to the same color as the parent element. Those pixels are not transparent and will not show any background image that is used in the parent element.

@metal i found a way... Your back ground color seems to be in red right!..... If so go to corner.js and find #ffffff and replace it with your red color code...

find this line in ,

return '#ffffff'; and change to return '#ff0000';

EDIT:

I found this in forums.asp.net

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.corner.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#test").corner();
        });
    </script>

</head>
<body style="background-color: red;">
    <form id="form1" runat="server">
    <div id="test" style="width: 250px; height: 250px; 
      background-color: white; opacity: 0.6;
        filter: alpha(opacity=60)">
         
    </div>
    </form>
</body>
</html>

Problem is, that this isn't possible because of the way it set.

It sets a div on top, and then uses a set of borders to create the effect.

You can change the color of the border, but if you make it transparent it will just show the absolutely positioned div below it.