我理解的并不是很深刻但是希望能對你 有所啟發(fā)
成都創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、成都做網(wǎng)站、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)制作的專業(yè)網(wǎng)站建設(shè)公司，擁有經(jīng)驗(yàn)豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計(jì)人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實(shí)力，在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨(dú)特的設(shè)計(jì)風(fēng)格。自公司成立以來曾獨(dú)立設(shè)計(jì)制作的站點(diǎn)1000+。
以下是原創(chuàng)正文：
css到底是什么？css據(jù)我理解也算是一種語言，專業(yè)術(shù)語叫超文本層疊樣式表，
css的功能非常的強(qiáng)大，好像是溫謙老師說的愛上CSS，
css：像藝術(shù)家一樣浪漫，像工程師一樣嚴(yán)禁。說實(shí)話講css真的太好了。
css能讓你做網(wǎng)站的時(shí)候擺脫表格布局，它是一種比較舊的新式語言。
說它舊因?yàn)楹茉缇痛嬖诹?，只是很少有人去用，直到最近幾年才被廣泛應(yīng)用。
css的靈活性是HTML語言無法實(shí)現(xiàn)的。舉個(gè)簡單的例子，b互聯(lián)網(wǎng)，我來了！/b這個(gè)我想你應(yīng)該了解，這是加粗字體，HTML就這么簡單了無法再添加功能了，但是css卻可以這樣做b style="font-color:red"互聯(lián)網(wǎng)，我來了！/b字體不但加粗而且是紅色顯示。這就是css的其中一個(gè)很微小的功能，時(shí)間有限不再寫了，希望多少能對你有所幫助，另外歡迎到我的論壇來共同探討提高bbs.xtzonghe.cn
用css3制作紙張效果
一、中規(guī)中矩的效果
所謂“中規(guī)中矩的效果”就是加個(gè)投影，貼個(gè)膠帶什么的。效果如下：
CSS3的box-shadow投影效果，相關(guān)代碼如下：
代碼如下:
-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
反而是上面的膠帶紙效果有點(diǎn)說頭，這些微微傾斜的膠帶是CSS寫出來的，大部分效果源自CSS3，主要有RGBA顯示半透明背景色，box-shadow顯示淡淡的投影，transform做旋轉(zhuǎn)效果；元素使用after偽類生成，完整代碼如下：
代碼如下:
.page:after { width: 180px; height: 30px; content: " "; margin-left: -90px; border: 1px solid rgba(200, 200, 200, .8); background: rgba(254, 254, 254, .6); -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); position: absolute; left: 50%; top: -15px; }
老外似乎很喜歡使用before和after偽類，國外最近的些教程，技術(shù)點(diǎn)等經(jīng)常見到此玩意。我個(gè)人感覺有跟風(fēng)之嫌，就像是狂熱的經(jīng)濟(jì)泡沫，不需 要太久，大家會(huì)冷靜下來重新審視這些曾經(jīng)上手簡單，自我感覺不錯(cuò)的方法。由于目前IE6/7不支持before/after類，所以，某種意義上來說，偽 類的使用少了些兼顧IE下顯示的煩惱。
二、外翻卷角紙張效果
紙張一般都是有卷角的，所以，我們可以更近一步，模擬卷角效果來使得紙張的感覺更逼真，這里就要借助于投影了，且是曲線投影。
我們還可以給紙張?jiān)黾訚u變(gradient)效果，以模擬紙張的曲度。
同時(shí)，可以給文字增加投影，可以讓文字有書寫的凹陷感，可以進(jìn)一步讓紙張效果更逼真。
于是，在“中規(guī)中矩”紙張基礎(chǔ)上，我們做點(diǎn)小手術(shù)，結(jié)果得到下面的效果：
您可以狠狠地點(diǎn)擊這里：漸變卷邊紙張效果demo
目前貌似opera瀏覽器還不支持CSS3漸變，同時(shí)webkit核心下瀏覽器下的gradient漸變的寫法已經(jīng)開始向FireFox瀏覽器靠攏了。確實(shí)，都是CSS3，有必要搞得五花八門嗎？
相關(guān)漸變CSS代碼如下：
代碼如下:
background:-moz-linear-gradient(top, #f4f39e, #f5da41 60%, #fe6); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f39e), to(#fe6), color-stop(.6, #f5da41));
在60%的位置有個(gè)顏色拐點(diǎn)。
關(guān)于弧形的投影，也是使用:before/:after偽類實(shí)現(xiàn)的，相關(guān)代碼如下：
代碼如下:
.page:before { -webkit-transform: skew(-15deg) rotate(-5deg); -moz-transform: skew(-15deg) rotate(-5deg); -o-transform: skew(-15deg) rotate(-5deg); transform: skew(-15deg) rotate(-5deg); left: 15px; } .page:after { -webkit-transform: skew(15deg) rotate(5deg); -moz-transform: skew(15deg) rotate(5deg); -o-transform: skew(15deg) rotate(5deg); transform: skew(15deg) rotate(5deg); right: 15px; } .page:before, .page:after { width: 90%; height: 20%; content: ' '; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); position: absolute; bottom: 22px; z-index: -1; }
要想查看效果的完整代碼，demo頁面查看源文件即可，脫光光，一覽無遺。
這里的曲線投影卷角效果支持Opera瀏覽器，如下截圖：
三、帶分隔線的卷紙紙張效果
上面的紙張卷角效果是通過曲線投影效果來模擬的，而這里，紙張的卷邊效果是紙張真的“曲線化”了，而且，還是帶隔線的紙張效果哦，您可以參見下面的效果截圖(Chrome 9)：
這里，F(xiàn)irefox瀏覽器下的紙張隔線使用的是重復(fù)漸變(Repeating Gradients)實(shí)現(xiàn)的，對于webkit瀏覽器，使用的是background-size實(shí)現(xiàn)的。實(shí)際上，F(xiàn)irefox3.6+已經(jīng)支持background-size屬性了(-moz-background-size)， 所以，對于Firefox瀏覽器，這里使用重復(fù)漸變與漸變+background-size是等效的。在FireFox4以及IE9瀏覽器中 background-size屬性已經(jīng)沒有私有屬性了，Opera瀏覽器在9.5版本時(shí)候就已經(jīng)支持background-size屬性了，但是存在一 些bug。
這里分隔線實(shí)現(xiàn)的相關(guān)CSS如下：
代碼如下:
background: -moz-repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); background: -webkit-gradient( linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b) ); background: repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); -webkit-background-size: 100% 30px;
而對于曲邊的實(shí)現(xiàn)，使用的是border-radius圓角，這里展示下示意的代碼：
代碼如下:
border-bottom-left-radius: 20px 500px; border-bottom-right-radius: 500px 30px; border-top-right-radius: 5px 100px;
當(dāng)然，F(xiàn)ireFox瀏覽器下的寫法不是如此，其bottom, left是連起來的，而不是”-”分隔，這里僅僅是示意，這里的微曲線是如何實(shí)現(xiàn)的。相信看到上面的代碼就知道意思了，這里就不啰嗦了。
還有其他些細(xì)節(jié)，如如何控制行高讓文字與隔線一一對應(yīng)，這些您要是有興趣可以去demo頁面，通過查看元素等方法一看究竟。
四、最后點(diǎn)老生常談
難免的，本文的重點(diǎn)在于CSS3，所以就本文而言，IE6/IE7/IE8瀏覽器就是過來打醬油的，且三個(gè)紙張效果從一而終，都是下面這副模樣：
雖然沒有透明膠效果，沒有投影，沒有卷邊，更沒有分隔線，但是，就功能上來講，一點(diǎn)都不影響使用。所以，無論你是漸進(jìn)增強(qiáng)還是退求其次，紙張投影效果在實(shí)際項(xiàng)目中的應(yīng)該也不是不可以的，這就要看個(gè)人和團(tuán)隊(duì)的抉擇了。
2017-01-31
本文主要講解如何使用 CSS 控制打印樣式。
使用 CSS 可以控制文檔如何正確的顯示在不同的媒介 (Media) 上。其中分頁媒介 (Paged Media) ，不同于連續(xù)媒介 (Continuous Media)，它可以控制文檔內(nèi)容，將其分隔至一個(gè)或多個(gè)不相關(guān)聯(lián)的頁面 (如：書、幻燈片)。
頁面 (Page Sheet) 是物理介質(zhì) (如：紙張) 的表面，它包含可打印區(qū)域 (Printable Areas) 和不可打印區(qū)域 (Non-printable Areas)。用戶代理可以調(diào)整文檔內(nèi)容的格式，使其顯示在可打印區(qū)域。
頁面盒子 (Page Box) 是一個(gè)由長邊 (Long Edge) 和短邊 (Short Edge) 組成的矩形。長邊的方向決定了頁面朝向 (Page Orientation)，長邊是垂直方向，則頁面朝向?yàn)榭v向 (Portrait Orientation)，反之為橫向 (Landscape Orientation)。
CSS 打印無法指定文檔是否為雙面打印 (Duplex Printing)，是否雙面打印應(yīng)該通過用戶代理指定。不管是否雙面打印，CSS 打印總是包含左頁和右頁 (分別通過 :left , :right 指定) 。（或者說 CSS 打印假定所有文檔是雙面打?。?/p>
和 CSS 盒子模型一樣，頁面盒子模型由外邊距 (margin)、邊框 (border)、內(nèi)邊距 (padding) 和 內(nèi)容區(qū)域 (content area) 構(gòu)成。
其中內(nèi)容區(qū)域和外邊距有著特殊的功能：
頁面進(jìn)度 (Page Progression)方向 是文檔被分隔后的頁面的排列方向。比如：現(xiàn)代中文頁面進(jìn)度多是從左至右；而古代中文的頁面進(jìn)度則相反?？梢酝ㄟ^設(shè)置根元素 (root element) 的 direction 和 writing-mode 屬性來改變頁面進(jìn)度。
頁面的“第一頁”是左頁還是右頁，可以由頁面進(jìn)度的方向決定，當(dāng)頁面進(jìn)度方向?yàn)閺淖笾劣視r(shí)，第一頁是右頁；反之為左頁。（事實(shí)上也可以通過設(shè)置根元素的 break-before 屬性來強(qiáng)制改變第一頁是左頁還是右頁）
在 CSS 中使用 @media print
在 CSS 中使用 @import
在 HTML 中使用 link 標(biāo)簽
在 @media print 或 my-print-style.css 中，可以自由的修改大部分樣式。
使用打印媒介查詢可以自定義很多樣式，當(dāng)希望改變頁面大小、邊距等，就需要用到 @page 了。頁面上下文 (Page Context) 中僅支持部分 CSS 屬性，支持的屬性有： margin 、 size 、 marks 、 bleed 以及頁面外邊距盒子等，不支持的屬性將會(huì)被忽略。
注：常見瀏覽器都不支持該屬性，推薦使用 Prince
頁面的外邊距被分成了 16 個(gè)頁面外邊距盒子。每個(gè)外邊距盒子都有自己的外邊距、邊框、內(nèi)邊距和內(nèi)容區(qū)域。頁面外邊距盒子用于創(chuàng)建頁眉和頁腳，頁眉和頁腳是頁面的一部分，用于補(bǔ)充信息，如頁碼或標(biāo)題。
頁面外邊距盒子需要在 @page 下使用，使用起來和偽類類似，也包含 content 屬性。
margin 系列屬性（ margin-top 、 margin-right 、 margin-bottom 、 margin-left 和 margin ）用于指定頁面外邊距大小。
在 CSS2.1 中，頁面上下文中只支持 margin 系列屬性。而且因?yàn)?CSS2.1 的頁面上下文中沒有字體的概念， margin 系列屬性的值的單位不支持 em 和 ex 。
size 屬性支持 auto 、 landscape 、 portrait 、 length{1,2} 和 page-size 。
頁面上下文也支持使用偽類，其中支持的偽類有： :left 、 :right 、 :first 和 :blank 。
需要雙面打印時(shí)，通常需要將左頁和右頁設(shè)置不同的樣式（如頁邊距、頁碼位置）。這時(shí)左頁和右頁可以分別用 :left 和 :right 表示。再次強(qiáng)調(diào)， 通過 :left 和 :right 設(shè)置左右頁面不同樣式，并不代表用戶代理會(huì)將頁面雙面打印
偽類 :first 用于匹配到文檔的第一頁。
偽類 :blank 用于匹配文檔的空白頁。
注意，空白頁既可能是左頁，又可能是右頁，設(shè)置左頁或右頁的樣式也會(huì)顯示在空白頁上，如果不希望顯示在空白頁上，可以清除這些樣式。
用于控制元素之前、之后或之中是否分頁， 沒有生成盒子的塊元素不會(huì)生效 。
page-break-before 、 page-break-after 屬性支持 auto 、 always 、 avoid 、 left 、 right 、 recto 和 verso 。
page-break-inside 屬性僅支持 auto 和 avoid ，表示在元素內(nèi)允許或禁止分頁。
orphans 和 windows 用于指定在頁面的底部或頂部，元素中允許剩余的最少行數(shù)，默認(rèn)為 2 行。
示例：
參考鏈接：
重慶分公司
重慶分公司
