Border-Radius interaktives Tool

Ein sehr anschaulisches Tool liefert – das verwundert sehr – Microsoft zur Demonstration der border-radius-Attribute in CSS3:

http://ie.microsoft.com/testdrive/HTML5/01BorderRadius/Default.html

Und hier der Quellcode der Seiten zur einfachen Referenz:

CSS

 #test{
/*font-family: Georgia, Serif;*/
font-size: 18pt;
padding: 38px;
border-style: solid;
border-width: 6px;
border-color: orange;
margin: 0.25in auto 0 auto;
width: 800px;
min-height: 426px;
position: relative;
background-color: #dcdcdc;
color: Black;
background-position: center center;
}
#css
{
padding: 0.125in 0 0.125in 0.5in;
}
#tl, #tr, #br, #bl
{
position: absolute;
z-index: 10;
width: 0px;
height: 0px;
border-color: rgba(255, 255, 255, 0.6);
border-width: 2px;
border-style: none;
display: none;
}
#tl
{
border-right-style: solid;
border-bottom-style: solid;
}
#tr
{
border-left-style: solid;
border-bottom-style: solid;
}
#br
{
border-left-style: solid;
border-top-style: solid;
}
#bl
{
border-right-style: solid;
border-top-style: solid;
}

HTML

-moz-border-radius: 152px 304px 228px 152px;
border-style: solid;
border-width: 6px;
padding: 48px;

Copyright © Microsoft Corporation. All Rights Reserved.

Dieser Beitrag wurde unter CSS3 abgelegt und mit , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Eine Antwort auf Border-Radius interaktives Tool

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert