填充浏览器左右两侧缺失的对角线渐变
Fill missing diagonal gradient at the right and left sides of the browser
CSS
body:before, body:after {
content: "";
position: fixed;
left: 0;
right: 0;
height: 20px;
background-position: 0 0, 0 100% ;
background-repeat: no-repeat;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
background-size: 100% 20px;
background-image: -webkit-linear-gradient(to right, #ff9933 0%, #ff1493 100%), -webkit-linear-gradient(right, #ff9933 0%, #3c4ed5 100%);
background-image: -moz-linear-gradient(to right, #ff9933 0%, #ff1493 100%), -moz-linear-gradient(right, #ff9933 0%, #3c4ed5 100%);
background-image: -o-linear-gradient(to right, #ff9933 0%, #ff1493 100%), -o-linear-gradient(right, #ff9933 0%, #ff1493 100%);
background-image: linear-gradient(to right, #ff9933 0%, #ff1493 100%), linear-gradient(to left, #ff9933 0%, #ff1493 100%);
}
body:before {
top: 0;
}
body:after {
bottom: 0;
}
尝试在浏览器视口的两侧设置对角线渐变，但仅设法让顶部和底部显示渐变。想要显示类似于对角渐变示例的对角渐变。
渐变应该像这个图像一样
body如何在浏览器的所有边，包括浏览器的左边和右边都充满"borders"？
感谢帮助。
用 border-image 属性 创建的对角线渐变有点像这样（这不是确切的工作，而是一个帮助理解其产生方式的示例）：
- 下层整体添加对角渐变。
- 除了border-width 以外的区域都被剪裁掉了，所以内部是透明的。 （您可以将其可视化为在对角渐变层顶部放置一个白色背景层，高度和宽度 = 容器的高度和宽度 - 边框宽度）。
下面是它是如何创建的可视化。您可以看到 div 具有对角渐变，而 div:after 通过使用分配给它的白色背景来掩盖内部部分。如果您可以针对您的案例模仿这种方法，那将是非常好的，因为这是 最简单且最受推荐的 CSS 方法。您当然可以使用 CSS 或 SVG clip-path 来剪辑内部部分，但 clip-path 的问题是 IE 不提供任何支持。
.diagonal-gradient{
position: relative;
height: 200px;
width: 200px;
background-image: linear-gradient(to top left, rgb(254,23,144), rgb(254,151,52));
}
.diagonal-gradient:after{
position: absolute;
content: '';
height: calc(100% - 40px);
width: calc(100% - 40px);
top: 20px;
left: 20px;
background: white;
}
<div class='diagonal-gradient'></div>
由于border-image如何产生对角渐变，几乎不可能通过使用小背景（与所需边框大小相同）并将它们放在每个角上来模仿其行为.如果不手动查找每个角的颜色，您可以获得的最接近的是下面的代码片段（但它不完全是对角线渐变）：
body:before {
content: "";
position: fixed;
left: 0;
right: 0;
height: calc(100% - 40px);
width: calc(100% - 40px);
padding: 20px;
background-origin: border-box;
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-image: linear-gradient(to right, #ff9933 0%, #ff1493 100%), linear-gradient(to left, #ff9933 0%, #ff1493 100%), linear-gradient(to bottom, #ff9933 0%, #ff1493 100%), linear-gradient(to top, #ff9933 0%, #ff1493 100%);
}
body:before {
top: 0;
}
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.</p>
另一方面，如果您可以手动计算每个角的颜色（或使用颜色选择器工具），那么您可以使用这些计算值创建渐变，如下面的代码片段所示。此输出反映了对角梯度，但涉及手动过程并且很复杂。
body:before {
content: "";
position: fixed;
left: 0;
right: 0;
height: calc(100% - 40px);
width: calc(100% - 40px);
padding: 20px;
background-origin: border-box;
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-image: linear-gradient(to right, rgb(254, 151, 52) 0%, rgb(255, 66, 114) 100%), linear-gradient(to left, rgb(254, 23, 144) 0%, rgb(254, 109, 82) 100%), linear-gradient(to bottom, rgb(254, 151, 52) 0%, rgb(254, 109, 82) 100%), linear-gradient(to top, rgb(254, 23, 144) 0%, rgb(255, 66, 114) 100%);
}
body:before {
top: 0;
}
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.</p>
CSS
body:before, body:after {
content: "";
position: fixed;
left: 0;
right: 0;
height: 20px;
background-position: 0 0, 0 100% ;
background-repeat: no-repeat;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
background-size: 100% 20px;
background-image: -webkit-linear-gradient(to right, #ff9933 0%, #ff1493 100%), -webkit-linear-gradient(right, #ff9933 0%, #3c4ed5 100%);
background-image: -moz-linear-gradient(to right, #ff9933 0%, #ff1493 100%), -moz-linear-gradient(right, #ff9933 0%, #3c4ed5 100%);
background-image: -o-linear-gradient(to right, #ff9933 0%, #ff1493 100%), -o-linear-gradient(right, #ff9933 0%, #ff1493 100%);
background-image: linear-gradient(to right, #ff9933 0%, #ff1493 100%), linear-gradient(to left, #ff9933 0%, #ff1493 100%);
}
body:before {
top: 0;
}
body:after {
bottom: 0;
}
尝试在浏览器视口的两侧设置对角线渐变，但仅设法让顶部和底部显示渐变。想要显示类似于对角渐变示例的对角渐变。
渐变应该像这个图像一样
body如何在浏览器的所有边，包括浏览器的左边和右边都充满"borders"？
感谢帮助。
用 border-image 属性 创建的对角线渐变有点像这样（这不是确切的工作，而是一个帮助理解其产生方式的示例）：
- 下层整体添加对角渐变。
- 除了border-width 以外的区域都被剪裁掉了，所以内部是透明的。 （您可以将其可视化为在对角渐变层顶部放置一个白色背景层，高度和宽度 = 容器的高度和宽度 - 边框宽度）。
下面是它是如何创建的可视化。您可以看到 div 具有对角渐变，而 div:after 通过使用分配给它的白色背景来掩盖内部部分。如果您可以针对您的案例模仿这种方法，那将是非常好的，因为这是 最简单且最受推荐的 CSS 方法。您当然可以使用 CSS 或 SVG clip-path 来剪辑内部部分，但 clip-path 的问题是 IE 不提供任何支持。
.diagonal-gradient{
position: relative;
height: 200px;
width: 200px;
background-image: linear-gradient(to top left, rgb(254,23,144), rgb(254,151,52));
}
.diagonal-gradient:after{
position: absolute;
content: '';
height: calc(100% - 40px);
width: calc(100% - 40px);
top: 20px;
left: 20px;
background: white;
}
<div class='diagonal-gradient'></div>
由于border-image如何产生对角渐变，几乎不可能通过使用小背景（与所需边框大小相同）并将它们放在每个角上来模仿其行为.如果不手动查找每个角的颜色，您可以获得的最接近的是下面的代码片段（但它不完全是对角线渐变）：
body:before {
content: "";
position: fixed;
left: 0;
right: 0;
height: calc(100% - 40px);
width: calc(100% - 40px);
padding: 20px;
background-origin: border-box;
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-image: linear-gradient(to right, #ff9933 0%, #ff1493 100%), linear-gradient(to left, #ff9933 0%, #ff1493 100%), linear-gradient(to bottom, #ff9933 0%, #ff1493 100%), linear-gradient(to top, #ff9933 0%, #ff1493 100%);
}
body:before {
top: 0;
}
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.</p>
另一方面，如果您可以手动计算每个角的颜色（或使用颜色选择器工具），那么您可以使用这些计算值创建渐变，如下面的代码片段所示。此输出反映了对角梯度，但涉及手动过程并且很复杂。
body:before {
content: "";
position: fixed;
left: 0;
right: 0;
height: calc(100% - 40px);
width: calc(100% - 40px);
padding: 20px;
background-origin: border-box;
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-image: linear-gradient(to right, rgb(254, 151, 52) 0%, rgb(255, 66, 114) 100%), linear-gradient(to left, rgb(254, 23, 144) 0%, rgb(254, 109, 82) 100%), linear-gradient(to bottom, rgb(254, 151, 52) 0%, rgb(254, 109, 82) 100%), linear-gradient(to top, rgb(254, 23, 144) 0%, rgb(255, 66, 114) 100%);
}
body:before {
top: 0;
}
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at magna eu augue tempor viverra sed aliquam massa. Nunc odio velit, ultricies non feugiat luctus, aliquet quis ante. Nullam rutrum lectus non mauris commodo, eu imperdiet urna consequat.
Donec placerat auctor commodo. Aliquam lacinia, mi vel consectetur aliquet, mauris neque elementum dolor, vitae volutpat massa elit facilisis lectus. Phasellus eget dolor ac dolor fermentum blandit. Fusce sollicitudin pellentesque augue ut tempor.
Nam luctus neque et tellus lobortis, eget accumsan tellus elementum. Curabitur erat magna, scelerisque et lorem a, pellentesque consequat ligula.</p>
<p>Ut a metus egestas, interdum est eu, hendrerit arcu. Sed tempus, metus sit amet tempor imperdiet, lacus nulla pellentesque sem, at pellentesque turpis mi non quam. Cras eu interdum leo. In non blandit lacus. Mauris nec volutpat arcu, sit amet porttitor
mi. Mauris mollis libero vel enim tincidunt interdum. Quisque mi odio, blandit eget enim sit amet, faucibus gravida mauris. Donec fringilla faucibus gravida. Mauris imperdiet ipsum id posuere luctus.</p>
<p>Curabitur risus leo, elementum a nulla eu, tincidunt elementum nibh. Ut eget sem at metus dignissim fermentum. Integer ac varius tellus, ut porttitor augue. Nullam venenatis congue ipsum, a sagittis lectus suscipit ut. Suspendisse sit amet tristique
lacus, at rutrum enim. Aenean id dolor ac dolor efficitur molestie. Curabitur non sapien sit amet libero finibus vestibulum. Nullam sed odio mollis, rhoncus nunc vitae, laoreet metus. Vestibulum sed ante vitae sem pretium dignissim. Praesent lobortis
sit amet libero eu aliquet. Suspendisse vel feugiat massa. Proin tristique lacus nisi, id laoreet ligula aliquam et. Aliquam convallis feugiat vulputate. Aenean sed lobortis nibh. Nunc erat orci, pellentesque et lobortis ut, ullamcorper vitae lacus.</p>
<p>Suspendisse potenti. Maecenas accumsan eros elit. Sed non metus sagittis, hendrerit sem id, vestibulum nunc. Mauris vel tellus consectetur leo suscipit varius. Maecenas cursus augue nulla. Integer lacinia id mi in tempor. Proin hendrerit mauris at sem
auctor interdum.</p>
<p>Aenean vel felis a quam consequat gravida. Nunc non fringilla ipsum. Praesent interdum ante mauris, in luctus ex pellentesque vel. Fusce velit diam, maximus quis orci vel, maximus eleifend sapien. Maecenas nec mi aliquam libero tincidunt posuere. Maecenas
eget sem id enim blandit viverra. Pellentesque convallis elit in dui luctus euismod at at tellus. Fusce ornare ex sollicitudin dui sollicitudin, id euismod mauris condimentum.</p>