How to create rounded corners on DIV's with CSS and ASP.NET MVC 3
I am trying to create rounded corners on my divs. I am using the standard template in an ASP.NET MVC 3 application.
I have followed this guide:
http://viralpatel.net/blogs/2009/08/rounded-corner-css-without-images.html
basicly you put this in your css file:
#selector {
-moz-border-radius: 10px;
-webkit-border-radius: 10开发者_JS百科px;
border-radius: 10px;
}
and
<div id="selector">
Why does my site not show rounded corners on my divs? I have tried with Firefox and Chrome.
You forgot to specify a border!
You need to change your CSS to this in order to display the border:
#selector {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
}
in asp.net its easy to implement rounded corner to panels using ajax, try the following:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
</div>
<asp:Panel ID="Panel1" runat="server" BackColor="AppWorkspace" Height="188px" Width="271px">
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="Panel1_RoundedCornersExtender"
runat="server" Enabled="True" TargetControlID="Panel1" Radius="15">
</ajaxToolkit:RoundedCornersExtender>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论