卡卡網(wǎng)

有關Blockquote的css樣式，上一篇已經(jīng)介紹了《5個Blockquote的css樣式》，不過，那是使用css1的寫法，要借助雙引號的圖片和span、div等標簽來完成。今天將介紹3個使用css3來實現(xiàn)的Blockquote樣式，代碼更簡潔，并且無需借助圖片，推薦使用。

1、Blockquote樣式一

效果圖：

Blockquote-樣式一

css代碼：

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;

  /*字體*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  
  /*邊框 - (選項)*/
  border-left: 15px solid #c76c0c;
  border-right: 2px solid #c76c0c;

  /*盒子陰影 - (選項)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
  content: "\201C"; /*左雙引號的Unicode編碼*/

  /*字體*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;

  /*位置*/
  position: absolute;
  left: 10px;
  top:5px;
}
blockquote::after{
  content: ""; /*如果要顯示右雙引號，則寫 content: "\201D"; */
}

html代碼：

<blockquote>
html里使用select控件，非常容易就能實現(xiàn)下拉菜單的效果。但是由于select控件只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設計中有時候顯得與整體布局搭配不太美觀。正因為這個原因，div+css實現(xiàn)的下拉菜單便大量被網(wǎng)頁設計師使用。通過div+css，可以隨心所欲的實現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁整體布局搭配的更美觀和諧。
</blockquote>

2、Blockquote樣式二

效果圖：

Blockquote-樣式二

css代碼：

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

html代碼：

<blockquote>
html里使用select控件，非常容易就能實現(xiàn)下拉菜單的效果。但是由于select控件只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設計中有時候顯得與整體布局搭配不太美觀。正因為這個原因，div+css實現(xiàn)的下拉菜單便大量被網(wǎng)頁設計師使用。通過div+css，可以隨心所欲的實現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁整體布局搭配的更美觀和諧。
</blockquote>

3、Blockquote-樣式三

效果圖：

Blockquote-樣式三

css代碼：

blockquote {
 background-color: #eae6f3;
 border-left: 1em solid #5236a0;
 margin: 1.0em 0 1.0em;
 padding: 1em 1em 1em 1em;
 position: relative;
 color: #888;
}
blockquote:before {
  color: #392570;
  content: "\201C";
  font-size: 5em;
  line-height: 0em;
  margin-right: 0em;
  vertical-align: -0.4em;
}
blockquote:after {
  color: #392570;
  content: "\201D";
  font-size: 5em;
  position:absolute;
  right:3px;
  bottom: 0em;
  line-height: 0.1em;
}

html代碼：

<blockquote>
html里使用select控件，非常容易就能實現(xiàn)下拉菜單的效果。但是由于select控件只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設計中有時候顯得與整體布局搭配不太美觀。正因為這個原因，div+css實現(xiàn)的下拉菜單便大量被網(wǎng)頁設計師使用。通過div+css，可以隨心所欲的實現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁整體布局搭配的更美觀和諧。
</blockquote>

下載本文實例源碼文件： 點擊下載

相關文章推薦：

5個Blockquote的css樣式

2個實例教你怎樣修改和美化blockquote雙引號及css樣式

總結

上面三個Blockquote樣式，均使用css3來實現(xiàn)，無需圖片，即可在左上角和右下角同時出現(xiàn)雙引號，這如果是用css1是不能實現(xiàn)的。

css1的寫法，要借助雙引號的圖片和span、div等標簽來完成，可參考上一篇寫的《5個Blockquote的css樣式》。

也許大家會問，我們使用的主流瀏覽器支持css3？支持css3的瀏覽器有哪些？

其實，現(xiàn)在流行瀏覽器的最新版本都支持CSS3了，例如IE, Chrome, FireFox, Safari, Opera這5大瀏覽器，除了IE8以下版本不支持外，IE9、IE10、IE11都支持得很好了。360瀏覽器也當然支持，它用的是Chrome內核。

其中，支持最好的應該是Chrome和FireFox。

標簽: blockquote  css