css圓角

在現在的網頁設計,圓角是許多設計師的基本要求,為了解決各種奇奇怪怪的css圓角,在web-dev界發展了各種奇招巧技來滿足需求,其中能夠統一markup,使用OOCSS概念,又能考慮到accessibility,以及多種變化的css圓角,YUI CSS Guru Nate所提出的CSix CSS Techniques可以最彈性的應用了。

基本的Markup如下:

Header
Body
Footer


搭配的統一CSS Style如下:

其原理如下:

Header
Body
Footer

黃色部分為.x1a, 紅色部分為.x1,粉紅色部分為.x2,綠色部分為.x2a,而圓角的圖為可以完美的被分布在此模組的四周,完成CSS圓角的近乎完美的Solution!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *