好看的多说自定义CSS分享

发布于 2012年8月31日 / 倒腾 / 29 条评论

因为Ajax评论有严重问题所以我不得不重新用多说了，说实话它真的是目前国内最好的社会评论框了，虽然有点点小毛病，但是必须得说很好。

侧边栏浮动有问题，明显是javascript脚本搞的鬼，可怜我只会一点点HTML，而PHP，CSS，javascript对我来说简直就是残念！

好了，废话少说，这次我们要分享的是多说的自定义CSS，可以调整多说的评论样式。

样式效果

本站现在就换了个多说的样式，您可以看到，头像是圆的，您的鼠标移动到头像的时候会360°旋转，现在我给个图片看看：

如何做到

把下面的代码复制，然后到博客后台——多说评论——个性化设置，找到“自定义CSS”后将它们粘贴上去，别忘了点击确定。

#ds-reset .ds-avatar img{
width:54px;height:54px; /*设置图像的长和宽*/
border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:27px;
box-shadow: inset 0 –1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 –1px 0 #3333sf;
}
#ds-reset .ds-avatar img{
width:54px;height:54px; /*设置图像的长和宽*/
border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:27px;
box-shadow: inset 0 –1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 –1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/
box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
transform: rotateZ(360deg);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}

# CSS # 多说 # 自定义CSS

Edenharder @TA
来自 unknow in unknow

2014-02-16 上午2:11

我尝试完全用文中提供的代码加入到自己的screen.css文件中,虽然实现了旋转功能但是头像不是圆形的(见http://ieden.gitcafe.com/2014/02/13/hello-world.html). 项目托管在https://gitcafe.com/ieden/ieden/tree/gitcafe-pages, 还请高手指点指点, 已经瞎试了好久.
小五 @TA
来自 unknow in unknow

2012-12-25 下午1:30

好多人都在用了
瞎扯吧软件 @TA
来自 unknow in unknow

2012-09-11 下午5:38

可以定义css把使用多说给屏蔽了
超值街 @TA
来自 unknow in unknow

2012-09-07 下午1:51

不错，用上了。
王二 @TA
来自 unknow in unknow

2012-09-06 下午10:05

搞走了
1. Loir @TA
  来自 unknow in unknow
  
  2012-09-09 下午11:47
  
  @王二原来都是在这里学到的。。。
2. Loir @TA
  来自 unknow in unknow
  
  2012-09-09 下午11:47
  
  @王二原来都是在这里学到的。。。
歪歪、 @TA
来自 unknow in unknow

2012-09-04 下午9:32

我想问一下，为什么我的博客设置了为什么还有正方形的背景呢
1. Cysime @TA
  来自 unknow in unknow
  
  2012-09-15 下午2:19
  
  @歪歪、 IE系列有此类问题属于正常现象
Nivation雪蚀 @TA
来自 unknow in unknow

2012-09-01 下午5:33

好神奇啊
Pnnk @TA
来自 unknow in unknow

2012-09-01 下午2:20

其实多少蛮不错的
1. Cysime @TA
  来自 unknow in unknow
  
  2012-09-01 下午3:26
  
  @Pnnk 我也觉得~我蛮喜欢这个样式的..
小V @TA
来自 unknow in unknow

2012-09-01 上午11:46

哎哟.这个效果可以有..让我萌发了多搞几个样式的想法.
1. Cysime @TA
  来自 unknow in unknow
  
  2012-09-01 下午3:27
  
  @小V 研究吧= =+我们来抄袭= =++
  1. 小V @TA
    来自 unknow in unknow
    
    2012-09-01 下午3:32
    
    @Cysime 研究出来再说~ 哈哈
夜央 @TA
来自 unknow in unknow

2012-08-31 下午9:56

这里说下。我去官网大致看了看，你的文章可能要改下。第九行以上和以下应该是两个不同的效果的css。你写到一起啦。
1. Cysime @TA
  来自 unknow in unknow
  
  2012-09-01 下午3:27
  
  @夜央是啊，因为我把这俩效果混合到一起了....
  1. 夜央 @TA
    来自 unknow in unknow
    
    2012-09-01 下午4:05
    
    @Cysime 你没发现两端是一摸一样的吗。就是说第二个已经涵盖了第一个了。所以没必要加前9句代码。重复了
夜央 @TA
来自 unknow in unknow

2012-08-31 下午9:51

虽然圆圆头像最近开始火了。我怕太赶潮流啦~这个头像转动的先拿走看看，看看方块的转动什么感觉~
1. Cysime @TA
  来自 unknow in unknow
  
  2012-09-01 下午3:28
  
  @夜央我觉得方块转动有点别扭...真的...
蚊哥 @TA
来自 unknow in unknow

2012-08-31 下午9:19

哇塞，这个太牛了！
1. Cysime @TA
  来自 unknow in unknow
  
  2012-08-31 下午9:20
  
  @蚊哥仅限多说用户~
啄木游弋 @TA
来自 unknow in unknow

2012-08-31 下午9:04

好高端的头像效果
1. Cysime @TA
  来自 unknow in unknow
  
  2012-08-31 下午9:43
  
  @啄木游弋哈哈...都是CSS的玩意儿~可惜我不在行...
Uncle.E @TA
来自 unknow in unknow

2012-08-31 下午8:56

有没有其他的啦？
1. Cysime @TA
  来自 unknow in unknow
  
  2012-08-31 下午8:57
  
  @Uncle.E 总之我没有其它的了
  1. Uncle.E @TA
    来自 unknow in unknow
    
    2012-08-31 下午8:57
    
    @Cysime 哪搞的，小正太~
    1. Cysime @TA
      来自 unknow in unknow
      
      2012-08-31 下午9:02
      
      @Uncle.E 当然是多说官网了........
Uncle.E @TA
来自 unknow in unknow

2012-08-31 下午8:56

用了，用了··感觉不错很棒撒··

Cysime Moflu

样式效果

如何做到