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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。