比比叨

我喜欢折腾，看到别人的博客有很漂亮的样式呀，框架呀，甚至是背景壁纸，小小的图标，只要是觉得好看的就想着如何也能让自己的博客和他们一样。可是无奈自己对编程呀，代码呀什么都不会。所以每次都是瞎折腾，乱折腾。到最后不旦什么也没有弄好反而把自己的博客弄的乱七八糟。无数次的换主题，瞎折腾，弄的博客打不开了，又继续换主题，继续瞎折腾，继续弄的博客打不开，然后又继续....
我也不知道为什么我喜欢瞎折腾，每次都告诉自己不要弄啦，现在这样已经很可以了，不懂就不要乱弄嘛！一直这样提醒着自己，可是每次都是控制不住，在瞎折腾这条路上越走越远。也不记得在哪个博客里看到这样一句话：生活就是要折腾！

始因

逛博客的时候发现一个博客的评论区有个对话框效果很有立体感，于是就想在自己的博客里给弄个这样的效果，于是就在百度上搜索：CSS 对话框，找了一篇实现的文章——用 css 写一个对话框
里面对于如何一步步的实现对话框效果写的非常的详细，然后我只看中它最终实现的效果：

width:200px;
height:100px;
background-color:#cdcdcd ;
margin-top:50px;
border-radius:20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

然后将以上代码放到了我的评论 CSS 里面，出现了问题 1：对话框太小导致评论的内容像条长蛇；2：灰色的背景和我当前的主题风格非常的不搭。

修改

只能修改代码了。上面的代码我还是大概能看懂几个，首先就是宽度 width 和高度 height 我是能看懂的，然后试着修改了几个宽度和高度都不满意，后面想到了干脆用 100% 省事，结果还真的可以了。然后就是灰色的背景，我直接把 background-color:#cdcdcd ; 删掉了，也轻松的搞定了，然后又把 margin-top:50px; 也删了，感觉没什么用，最终使用的就是：

width:100%;
height:100%;
border-radius:20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

继续

评论区实现了这种效果之后就想着把整个博客都用上这种效果，首先是首页的文章简要和内容正文都换了，但是用了上面的代码后又出现新的问题了，就是文字紧凑着边框显得好拥挤

然后想着应该是边距的问题，然后就加了 margin:10px 这个代码发现没有用，弄了半天还是不行，只好求助大佬——JDEAL, 把 margin:10px 改成了 padding:10px。
完美！

后续

看来还是要多加折腾才行，折腾使人成长！接下来要折腾的是——首页调用文章缩微图！加油！