Однострочный бордюр - PullRequest
Новая
       2

Однострочный бордюр

0 голосов
/ 16 мая 2018

У меня есть PNG, который составляет 10px x 1px, и мне нужно использовать его для изображения границы, но по какой-то причине изображение не повторяется. Это появляется в углах, но не полностью? Что я делаю не так? 

#border {
  width: 200px;
  height: 100px;
  border: 1px dashed transparent;
  border-image: url(https://image.ibb.co/byABRJ/border.png) 1 100% repeat;
  background: yellow;
  text-align: center;
  line-height: 100px;
}
<div id="border">
  bordered area
</div>

Ответы [ 4 ]

0 голосов
/ 16 мая 2018

В итоге создание изображения, которое CSS затем использовал для границы, оказалось слишком трудоемким. Вместо этого я нашел:

Как увеличить расстояние между точками пунктирной границы

И разместил там ответ с моим решением. Хотя это и не является прямым решением поставленного вопроса, оно решает его и без изображений, что для меня было проще.

0 голосов
/ 16 мая 2018

Параметр, который вы установили на 100%, равен border-image-width, я думаю, что вы хотите, чтобы он был 1 (или вы можете опустить его, я думаю, что он равен 1 по умолчанию). 

	<!DOCTYPE html>
	<html lang="en">
		<head>
			<style>
				#border {
					width:200px;
					height:100px;
					border:1px dashed transparent;
					border-image: url(https://image.ibb.co/byABRJ/border.png) 1 1 repeat;
					background:yellow;
					text-align:center;
					line-height:100px;
				}
			</style>
		</head>
		<body>
			<div id="border">
				bordered area
			</div>
		</body>
	</html>

Источник: https://www.w3schools.com/cssref/css3_pr_border-image.asp

РЕДАКТИРОВАТЬ: если вы хотите, чтобы ваше изображение границы было одинаковым на левом / правом краях, вам нужно будет добавить их к исходному изображению, которое вы используете. Взгляните на этот https://css -tricks.com / almanac / properties / b / border-image /

0 голосов
/ 16 мая 2018

Вы также можете использовать этот способ. 

#border {
   width:200px;
   justify-content: center;
   align-items: center;
   display: flex;
   height:100px;
   border-top:1px dashed blue;
   border-bottom:1px dashed blue;
   background:yellow;
}
    			
   	<!DOCTYPE html>
    	<html lang="en">
    		<head>
    			<title>Test</title>
    		</head>
    		<body>
    			<div id="border">
    				bordered area
    			</div>
    		</body>
    	</html>
0 голосов
/ 16 мая 2018

Неправильный старт, это 0, а не 100 

  border-image: url(https://image.ibb.co/byABRJ/border.png) 1 0% repeat;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...