当鼠标移到图片时、将所有图片都变圆.
11.16.2011, 11/16/2011 - Permalink | 0 Comments
看了标题、还不明白?
请看
我的图片、还是正方的.
原谅我用旧图. |
变圆了.
Blogskins
首先、Ctrl+F找
.header {
在上面添加以下代码.
*------ IMAGE HOVER ROUND------*/
img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px #000000; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #FFFFFF;padding: 0px;}
*------ IMAGE HOVER ROUND------*/ =为了你以后美化、就写名字.你可以不添加.
红色字体=圆的颜色.
粉红字体=圆的Border.
Border 的款式:
dotted
solid
dashed
inset
outset
至于图片呢、我就没有啦、你可以去Here.
的post找.
Blogger Template
按Ctrl+F找
/* Header
在上面添加以下代码
*------ IMAGE HOVER ROUND------*/
img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px #000000; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #FFFFFF;padding: 0px;}
解说、跟上面Blogskins一样.
预览、没问题后就保存.
老规矩
转载、请注明+留言让我知道.
拿我这里任何东西也是.
标签: 博客教学