教程 | Blockquote Effect

- Tutorial requested by Pandora Angel & Elaine-

曰：

原本是不打算发布这个教程的。只是很多博友觉得这个教程很特别，很喜欢。但是，却通过 “不法” 的途径来拿这个代码。不用我说。你们都知道是什么了。很不明白，喜欢但不会弄、那就问啊。有很丢脸么？我承认，我的代码也是从 BS 学来的，这个不是叫做拷贝啊，BS 就是让你整个模板下载去用的。那为什么使用 BT 就要抄袭呢、不能问，不能自己学么？难道你们觉得偷了代码，然后弄成像是自己发现的，会比较有面子么？好心了，大家都不是没有 sense 的人，好不？算了，我还是比较看得起，不会但肯问的亲亲博友们。来，亲一个 木啊 ♥

注意：如果你已经添加过 blockquote 代码，那就直接把以下代码 {...} 里的美化代码搬去你的 blockquote 代码里，不要再添加多一次，不然就看不到效果了。

版本 I

我是版本 I。

1. 设计 → 修改 HTML

2. 添加这个代码：

blockquote {
border: 1px solid #ccc;
box-shadow: inset 0px 0 0px 0 #cccccc;
padding: 4px;
}

blockquote:hover {
border: 1px solid #ccc;
box-shadow: inset 800px 0 0px 0 #cccccc;
padding: 4px;
-webkit-transition-duration: 1.5s;
}

3. 预览看看代码有没有问题，即可保存。

版本 II

我是版本 II。

1. 设计 → 修改 HTML

2. 添加这个代码：

blockquote {
border: 1px dashed #eeeeee;
border-right: 20px solid #fecdc9;
border-left: 20px solid #fecdc9;
box-shadow: inset 0px 0 10px 0 #fecdc9;
padding: 4px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}

blockquote:hover {
border: 1px dashed #eeeeee;
border-right: 20px solid #fecdc9;
border-left: 20px solid #fecdc9;
box-shadow: inset 0px 0 800px 0 #faafbe;
padding: 4px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}

 3. 预览看看代码有没有问题，即可保存。

小解释
红色代码：边框的类型、粗度、颜色。
蓝色代码：鼠标划过时，出现的效果的颜色（嘿嘿，自己发掘呗、）
紫色代码：慢慢划过的那个效果的时间 *可更改
青色代码：blockquote 圆框的弧度

- 当然，如果你还想添加自己的美化代码，当然可以，我给的不过是那个效果的 basecode, 重要的还是你自己的概念、设计。所以，效果的代码我给了，其他的就由你们自己去发掘吧！如果我发现到更多特别的效果，会再在这里更新的嗯、