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>

效果图:

css圆角

你可能感兴趣的:(css)