Основной вопрос, нужна помощь: я не могу понять, как добавить вектор границы? - PullRequest
Новая
       10

Основной вопрос, нужна помощь: я не могу понять, как добавить вектор границы?

0 голосов
/ 21 октября 2019

Я не могу понять это. Граница прикреплена как таковая, но всякий раз, когда я пытаюсь ее загрузить, она либо не появляется, либо выглядит совершенно иначе. Все стили CSS, которые я нашел круглые, растягивающиеся, прозрачные и т. Д., Все звучат великолепно, но продолжайте вмешиваться в изображение - все, что мне нужно, это граница, которая находится в топиш-центре оранжевого цвета страницы. Это, наверное, очень простая вещь, но я буквально шел на это в течение часов , и это просто не работает. > <;; </p>

Как это выглядит в настоящее время (nvm это не на том месте на странице): enter image description here

Полная граница / Как это должно выглядеть (примечание сокращает его как минимум на 50%): enter image description here

Код: 

<style>
  #border {
    border: 10px solid transparent;
    padding: 10px;
    height: 50%;
    width: 50%;
    border-image: url(vborder.png) 30 round;
  }
</style>
<body>
  <div id="border">
    <h2>hello</h2>
    <p>this is text</p>
  </div>
</body>

Спасибо всем !! ^^

1 Ответ

0 голосов
/ 21 октября 2019

Я думаю, что изображение границы, которое вы используете здесь, слишком велико. Как я вижу, изображение в 2550x3300 в пикселях. Это слишком велико для изображения границы.

Я увеличил ширину границы, и теперь изображение границы отображается. Но я не думаю, что это то, что вы хотите. Вы можете оформить заказ на этот CodePen .

Попробуйте уменьшить изображение в любом графическом редакторе и попробуйте свой существующий код еще раз:)

=======================================================================

РЕДАКТИРОВАТЬ: Я пошел проверять документы , вы можете на самом деле сохранить размер изображения (что плоходля размера веб-страницы вы должны уменьшить изображение для меньшего размера файла). Используя свойство border-image-slice, вы можете напрямую масштабировать изображение границы с помощью CSS.

PS: я думаю, что border: 10px слишком тонкий для этого изображения границы.

...