css圆角

aspx页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="圆角.aspx.cs" Inherits="圆角" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

    <script src="javsscript/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".divb").mouseover(function() {
                $(this).css({ "color": "#ff0000", "background-color": "#f5f5f5" });
            });
            $(".divb").mouseout(function() {
                $(this).css({ "color": "#000000", "background-color": "#ffffff" });
            });
            $(".divb").click(function() {
                //$(".diva").hide();
                $(".diva").css("display", "none");
            });
        });
    
    </script>
    <style type="text/css">
      .diva
{
    height:300px;
    width:300px;
    border:1px solid #0000ff;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    margin-top:30px;
    margin-left:30px;
}
.divb
{
    height:40px;
    width:40px;
    position:absolute;
    z-index:100;
    margin-left:280px;
    margin-top:-20px;
    border:solid 1px #FF0000;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    background-color:#ffffff;
    line-height:40px;
    text-align:center;
    font-weight:bold;
    cursor:pointer;
    font-size:18px;
}
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="diva">
        <div class="divb">
            ×
        </div>
    </div>
    </form>
</body>
</html>

效果图：

posted @ 2012-05-22 16:25  zhangchun  阅读(225)  评论(0)  编辑  收藏  举报