14 10 2010

又一坨圆角实现,恩恩

bigCat Posted in CSS - Comment.isBlank

http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/\r\n\r\n很淫荡,恩恩\r\n

<span class=\"frame\">\r\n<img src=\"/path/to/img.png\" />\r\n</span>\r\n

\r\n\r\n

.frame{\r\ndisplay:inline-block;\r\nposition:relative;\r\noverflow:hidden;\r\n}\r\n.frame>img{\r\nvertical-align:top;\r\n}\r\n.frame, .frame:before{\r\n-moz-border-radius:100em;\r\nborder-radius:100em;\r\n}\r\n.frame>img{\r\n-webkit-border-radius:100em;\r\n}\r\n.frame:before{\r\ncontent:'';\r\ndisplay:block;\r\nposition:absolute;\r\nleft:0;\r\nright:0;\r\nwidth:100%;\r\nheight:100%;\r\nmargin:-10em;\r\nborder:10em solid #1a1a1a;\r\n}\r\n

\r\n\r\n硬伤是,border只能实色不能用图案

Host: (miao) | Word: Press | Code: HTML5