每页打印的CSS样式？

Question

我正在尝试在打印页面的右侧放置一个div或{{1}}两种颜色。这是一张显示我的例子的图片：

我怎样才能做到这一点？谢谢！

Answer 1

我想也许你需要试试这个

<div id="yourdiv">
    <div>Multi Color Border using CSS3</div>
</div>

并像这样编写css文件

#yourdiv{
margin: auto;
width: 250px;
height: 250px;
padding:5px;
position: relative;
background-image: linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -o-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -moz-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -webkit-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -ms-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.56, #F24D55),
 color-stop(0.57, #FF924F),
 color-stop(0.74, #FFC164),
 color-stop(0.74, #62C374),
 color-stop(0.34, #F24D55),
 color-stop(0.33, #00AEDA)
);
}

#yourdiv div {
background-color: #333;
color:#fff;
font-size: 50px;
text-align: center;
margin: 0 auto;
min-height: 100%;
}

像这样的最终输出 output

Answer 2

您无法使用单个div将边框拆分为同一侧的不同颜色，您必须创建两个div才能达到此效果。

<style>
.box1 {
  border-right: green; 
}
.box2 {
  border-right: red; 
}
</style>
<div class="box1"></div>
<div class="box2"></div>