是否可以每隔75px更改一个边框的颜色？ [英] Is it possible to change the color of a border every 75px?

问题描述

我想在我的网站的左侧和右侧放置一个边框，其中有3个交替的颜色，高度为75px。左边很容易 - 有许多div，每个的高度为75px。我只是使用CSS nth-of型选择器来交替边框颜色。然而，我的网站的右侧是一个未知的宽度和高度的div，包含我的网站的内容。如果我无法使用第n个类型选择器，如何实现相同的效果？

I'd like to put a border with 3 alternating colors with a height of 75px on both the left side and right side of my website. The left side was easy - there were many divs each with a height of 75px. I simply used the CSS nth-of-type selector to alternate the border colors. The right side of my website, however, is a div of unknown width and height that contains the content of my website. How can I achieve the same effect if I'm unable to use the nth-of-type selector?

这是左侧页面边框的一部分：

Here's a section of the border of my left hand page:

我不想使用图像。 CSS3是好的，只要它适度降级，如果用户的浏览器不符合规格。

I'd prefer not to use images. CSS3 is fine as long as it gracefully degrades if the user's browser isn't up to spec.

推荐答案

您可以使用重复线性渐变 c $ c> background-size 或伪造该边框的图片。

you may use a repeating-linear-gradient with background-size or an image to fake that border.

 div {
   height:300px;
   background:repeating-linear-gradient(to bottom,#0194BE 0, #0194BE 75px, orange 75px, orange 150px, #E2D397 150px, #E2D397 225px) repeat-y;
   background-size:2px 225px;
 }

http://codepen.io/anon/pen/yDqrb

还要寻找使用 border-image http：// www .w3.org / TR / css3-background /＃border-images 。

如果您使用多个背景，可以绘制所有边框，假列

if you use multiple background, you can draw all borders and even do the fake columns

这篇关于是否可以每隔75px更改一个边框的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！