时间戳

首页 > 解决方案 > 如何摆脱 CSS 打印媒体中的八边形边框？

html - 如何摆脱 CSS 打印媒体中的八边形边框？

问题描述

尝试打印页面时出现边框问题。有人可以帮忙吗？

在此处输入图像描述

代码：

https://codepen.io/anon/pen/XPvQxw

body {
  -webkit-print-color-adjust: exact !important;
}

header {
  width: 100%;
}

header .small {
  font-weight: 500;
}

.header__container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 0 15px;
}

.header__title {
  font-family: 'Times New Roman';
  font-weight: 700;
}

.header__separator {
  border-top: 2px solid #fff;
  margin-bottom: .5rem;
}

.bg { 
  position: relative;
  background-color: blue;
  color: #fff;
  padding: 10px 0;
}

.bg:before, .bg:after { 
  content: "";
  position: absolute;
}

.bg:before {
  top: 0;
  left: 0;
  border-bottom: 20px solid blue;
  border-left: 20px solid #FFF !important;
  border-right: 20px solid #FFF !important;
  width: 100%;
  height: 0;
}

.bg:after {
  bottom: 0;
  left: 0;
  border-top: 20px solid blue;
  border-left: 20px solid #FFF !important;
  border-right: 20px solid #FFF !important;
  width: 100%;
  height: 0;
}

.bg__container { position: relative; z-index: 100; }
.list { list-style: none; margin: 0; padding: 0; }
.list-item { display: inline-block; }
.list-item:before { content: '|'; font-weight: 300; font-size: .8rem; }
.list-item:first-child:before { content: none; margin-left: 0; }
.list-item a { color: #fff; text-transform: uppercase; font-size: 13px; font-weight: 500; text-decoration: none; margin-left: 6px; margin-right: 3px; }
.list-item a:hover { color: #ddd; }
.text-red { color: red; }
.text-blue { color: blue; }
.text-black { color: black; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
    <header class="header bg mt-4 mb-4">
      <div class="header__container bg__container">
        <div class="header__top">
          <h3 class="header__title">Title</h3>
          <p class="h6">Sub-title</p>
          <p class="h6 small">AND</p>
          <p class="h6">Sub-title</p>
        </div>
        <hr class="header__separator">
        <nav class="header__nav">
          <ul class="header__nav-list list mb-1">
            <li class="header__nav-list-item list-item"><a href="#">home</a></li>
            <li class="header__nav-list-item list-item"><a href="#">home</a></li>
            <li class="header__nav-list-item list-item"><a href="#">home</a></li>
            <li class="header__nav-list-item list-item"><a href="#">home</a></li>
          </ul>
          <ul class="header__nav-list list">
            <li class="header__nav-list-item list-item"><a href="#">home</a></li>
            <li class="header__nav-list-item list-item"><a href="#">home</a></li>
            <li class="header__nav-list-item list-item"><a href="#">home</a></li>
          </ul>
        </nav>
      </div>
    </header>

标签： htmlcss

解决方案

你可以尝试一些不同的背景来避免这种情况，这里有一个用渐变来创建白色角落的想法：

body {
  -webkit-print-color-adjust: exact !important;
}

header {
  width: 100%;
}

header .small {
  font-weight: 500;
}

.header__container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 0 15px;
}

.header__title {
  font-family: 'Times New Roman';
  font-weight: 700;
}

.header__separator {
  border-top: 2px solid #fff;
  margin-bottom: .5rem;
}

.bg {
  position: relative;
  background: 
    linear-gradient(to top left,    transparent 49.8%,#fff 50%) top left,
    linear-gradient(to top right,   transparent 49.8%,#fff 50%) top right,
    linear-gradient(to bottom left, transparent 49.8%,#fff 50%) bottom left,
    linear-gradient(to bottom right,transparent 49.8%,#fff 50%) bottom right,
    blue;
  background-size:20px 20px;
  background-repeat:no-repeat;
  color: #fff;
  padding: 10px 0;
}



.bg__container {
  position: relative;
  z-index: 100;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-item {
  display: inline-block;
}

.list-item:before {
  content: '|';
  font-weight: 300;
  font-size: .8rem;
}

.list-item:first-child:before {
  content: none;
  margin-left: 0;
}

.list-item a {
  color: #fff;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-left: 6px;
  margin-right: 3px;
}

.list-item a:hover {
  color: #ddd;
}

.text-red {
  color: red;
}

.text-blue {
  color: blue;
}

.text-black {
  color: black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
  <header class="header bg mt-4 mb-4">
    <div class="header__container bg__container">
      <div class="header__top">
        <h3 class="header__title">Title</h3>
        <p class="h6">Sub-title</p>
        <p class="h6 small">AND</p>
        <p class="h6">Sub-title</p>
      </div>
      <hr class="header__separator">
      <nav class="header__nav">
        <ul class="header__nav-list list mb-1">
          <li class="header__nav-list-item list-item"><a href="#">home</a></li>
          <li class="header__nav-list-item list-item"><a href="#">home</a></li>
          <li class="header__nav-list-item list-item"><a href="#">home</a></li>
          <li class="header__nav-list-item list-item"><a href="#">home</a></li>
        </ul>
        <ul class="header__nav-list list">
          <li class="header__nav-list-item list-item"><a href="#">home</a></li>
          <li class="header__nav-list-item list-item"><a href="#">home</a></li>
          <li class="header__nav-list-item list-item"><a href="#">home</a></li>
        </ul>
      </nav>
    </div>
  </header>

推荐阅读