CSS bleed屬性用法及代碼示例

CSS出血屬性用於將頁麵出血區域擴展到內容框之外。此屬性可裁剪內容周圍的所有內容並適合框內的內容。此屬性是當前處於開發模式的頁麵媒體的一部分。 CSS出血屬性通過@page規則更有意義。當您要打印延伸到頁麵邊的任何內容時，此屬性將非常有用。很少有打印機不允許打印頁麵的邊。使用出血屬性可以打印該區域。因此，當頁麵被裁剪後，最終的內容將是正確的。

用法:

bleed:auto | length;

屬性：

auto:除非用戶創建marks屬性，並且其默認值為6pt，否則其默認值為零。
length它擁有一個數字，表明有多少內容可以直接使用。

以下示例說明了CSS出血屬性。例：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>CSS bleed property</title> 
    <style type="text/css"> 
        /* default for all pages */ 
          
        @page { 
            margin:2in; 
        } 
        /* margin on left page */ 
          
        @page:left { 
            margin:1in; 
            bleed:10pt; 
        } 
        /* margin on right page */ 
          
        @page:right { 
            margin:3in; 
            bleed:10pt; 
        } 
        /* top margin on first page */ 
          
        @page:first { 
            margin-top:5in; 
        } 
          
        h1 { 
            color:green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <h2>CSS bleed property</h2> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190821162842/colorMatrixImage1.png" 
             alt="" /> 
    </center> 
  
</body> 
  
</html>

輸出：GeeksforGeeks圖像的較暗部分是內容的出血區域。

支持的瀏覽器：CSS bleed屬性不支持主要的瀏覽器。

相關用法

注：本文由純淨天空篩選整理自skyridetim大神的英文原創作品 CSS | bleed property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。