像这种矩形凹陷的效果怎样用div+css实现啊???

丘淳 发布于 2012/12/12 19:13
阅读 6K+
收藏 2

最近在学习CSS3,就试着学习一些比较出色的css3效果.

在网上看到一个出色的设计达人的评论框效果.效果如下:

圆角的矩形,这个倒能实现.

点是左边一侧,居然能向内凹陷处一个和圆形图像符合的半圆.这个的确具有创意.

由于刚开始接触,琢磨了很久都想不出怎样实现这个效果.

希望各位高手能指点一下!谢谢啦!!!

(地址为:http://www.shejidaren.com/links   底部的评论框     该网站不是本人所认识的,绝不是打广告,纯粹是学习.)

加载中
2
Jeky
Jeky

@IdleMan 这么猜测的原因是css3在中国毕竟普及不了 你懂的

大概说一下这个是怎么做的:

首先是总体的框架是这样的:

<div class="all">
	<div class="avatar">
		<div class="avatar-inner"></div>
	</div>
	<div class="comment"></div>
</div>
然后是圆形的技巧:
width: 50px;
height: 50px;
border-radius: 25px;
设置长度和高度为同一个值,圆角为这个值的一半,这样就是一个圆了。

最后是最重要的圆形缺陷的技巧:
实际上是拿一个跟背景色同样颜色的大圆覆盖一部分在comment这个div上,就形成了缺。
然后再这个大圆中再套入一个小圆,就形成了这样的空缺中又一个小园的效果。

demo&代码:

http://runjs.cn/detail/ey9hmdpr

P.S. 凸起什么的我没做,那个就是box-shadow属性,上网一搜一大堆

丘淳
丘淳
高手!!! 谢谢了朋友!!!
0
Jeky
Jeky
目测是图片做的 给个原地址看看
丘淳
丘淳
http://www.shejidaren.com/links 底部的评论框.
IdleMan
IdleMan
osc的logo都可以css+div,这也应该也可以吧
0
南湖船老大
南湖船老大

这其实是几个矩形加一个半圆拼凑起来的。

评论框由三个矩形组成,上下部分是正常的,中间那个用了圆角。圆角也是矩形做的,网上有CSS3在线生成的,你可以试一下

返回顶部
顶部