当前位置: 首页>>代码示例>>用法及示例精选>>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。