就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. @page

在此页

@page CSS at-rule is used to modify some CSS properties when printing a document.

句法 

@page {
  margin: 1cm;
}
@page :first {
  margin: 2cm;
}

Descriptors

size

Specifies the target size and orientation of the page box’s containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.

marks

Adds crop and/or registration marks to the document.

bleed

Specifies the extent beyond the page box at which the page rendering is clipped.

描述

You can't change all CSS properties with @page . You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

@page at-rule can be accessed via the CSS object model interface CSSPageRule .

注意： The W3C is discussing how to handle viewport-related <length> units, vh , vw , vmin ，和 vmax . Meanwhile do not use them within a @page at-rule.

形式句法 

@page <page-selector-list> {
  <page-body>
}
where 
<page-selector-list> = [ <page-selector># ]?
<page-body> = <declaration>? [ ; <page-body> ]? | <page-margin-box> <page-body>
where 
<page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*
<page-margin-box> = <page-margin-box-type> '{' <declaration-list> '}'
where 
<pseudo-page> = : [ left | right | first | blank ]
<page-margin-box-type> = @top-left-corner | @top-left | @top-center | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner | @left-top | @left-middle | @left-bottom | @right-top | @right-middle | @right-bottom

范例

@page pseudo-class examples

Please refer to the various pseudo-classes of @page 范例。

规范

规范 状态 注释
CSS Logical Properties and Values Level 1
The definition of ':recto and :verso' in that specification. 		编者草案 添加 :recto and :verso page selectors
CSS Paged Media Module Level 3
The definition of '@page' in that specification. 		工作草案 无变化自 CSS Level 2 (Revision 1) , though more CSS at-rules can be used inside a @page .
CSS Level 2 (Revision 1)
The definition of '@page' in that specification. 		推荐 初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
@page Chrome 完整支持 2 Edge 完整支持 12 Firefox 完整支持 19 IE 完整支持 8 Opera 完整支持 6 Safari 不支持 No WebView Android 完整支持 37 Chrome Android 完整支持 18 Firefox Android 完整支持 19 Opera Android 完整支持 14 Safari iOS 不支持 No Samsung Internet Android 完整支持 1.0
bleed descriptor Chrome 不支持 No Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
marks descriptor Chrome 不支持 No Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
Page-margin boxes Chrome 不支持 No Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
size descriptor Chrome 不支持 No Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS Pages
  4. At-Rules
    1. @page
  5. 特性
    1. page-break-after
    2. page-break-before
    3. page-break-inside