五、CSS圓角矩形的實現
- <html>
- <head>
- <title>css圓角的實現</title>
- <style type="text/css">
- div{
- width:200px;
- height:200px;
- blue; < /span>
- border-radius:20px;
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
CSS3是樣式表(style sheet)語言的最新版本,它的一大優點就是支持圓角。
CSS3圓角只需設置一個屬性:border-radius(含義是"邊框半徑")。你爲這個屬性提供一個值,就能同時設置四個圓角的半徑。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。
比如,下面是一個div方框:
現在設置它的圓角半徑爲15px:
border-radius: 15px;
這條語句同時將每個圓角的"水平半徑"(horizontal radius)和"垂直半徑"(vertical radius)都設置爲15px。
border-radius可以同時設置1到4個值。如果設置1個值,表示4個圓角都使用這個值。如果設置兩個值,表示左上角和右下角使用第一個值,右上角和左下角使用第二個值。如果設置三個值,表示左上角使用第一個值,右上角和左下角使用第二個值,右下角使用第三個值。如果設置四個值,則依次對應左上角、右上角、右下角、左下角(順時針順序)。
border-radius: 15px 5px;
border-radius: 15px 5px 25px;
border-radius: 15px 5px 25px 0px;
(左下角的半徑爲0,就變成直角了。)
單個圓角的設置
除了同時設置四個圓角以外,還可以單獨對每個角進行設置。對應四個角,CSS3提供四個單獨的屬性:
* border-top-left-radius
* border-top-right-radius
* border-bottom-right-radius
* border-bottom-left-radius
這四個屬性都可以同時設置1到2個值。如果設置1個值,表示水平半徑與垂直半徑相等。如果設置2個值,第一個值表示水平半徑,第二個值表示垂直半徑。
border-top-left-radius: 15px;
border-top-left-radius: 15px 5px;