Градиентная граница имеет срез, но по-прежнему показывает только углы - PullRequest
Новая
       62

Градиентная граница имеет срез, но по-прежнему показывает только углы

0 голосов
/ 06 мая 2020

Я добавил границы изображения-фрагмента, но граница по-прежнему показывает только углы. Он также отображается за пределами полосатой границы, когда я хочу, чтобы он лежал прямо поверх него. Что я делаю не так? 

body {
          background-color: BLACK;
      background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
          }
    #header {
    	      padding: 10px;
              align-items: center;
    		  background: WHITE;
    		  display: inline-flex;
              align-items: center;
              justify-content: center;
      display: flex;
      box-sizing: border-box;
      width: 100%;
	  min-width: 100%;
         }
         .border {
              position: relative;
              z-index: -1;
              border: 10px solid #6b36ba;
              border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
        }
            .bordershine {
    	      display: flex;
              margin: 20px;
    		  border-width: 10px;
    		  border-style: solid;

              box-shadow:
                   0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
                   0 2px 6px rgba(0, 0, 0, 0.5),
                   0 10px rgba(0, 0, 0, 0.05) inset;

    		  border-image-slice: 10;
              border-image: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         }
          <div class="bordershine">
              <div id="header" class="border">
                   <img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'>
                   Hard Candy by IshikaruTanaka
              </div>
         </div>

1 Ответ

1 голос
/ 06 мая 2020

Срез должен быть после border-image

body {
  background-color: BLACK;
  background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}

#header {
  padding: 10px;
  align-items: center;
  background: WHITE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
}

.border {
  position: relative;
  z-index: -1;
  border: 10px solid #6b36ba;
  border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}

.bordershine {
  display: flex;
  margin: 20px;
  border-width: 10px;
  border-style: solid;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
  border-image: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
  border-image-slice: 10;
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
<div class="bordershine">
  <div id="header" class="border">
    <img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'> Hard Candy by IshikaruTanaka
  </div>
</div>

Или используйте border-image-source

body {
  background-color: BLACK;
  background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}

#header {
  padding: 10px;
  align-items: center;
  background: WHITE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
}

.border {
  position: relative;
  z-index: -1;
  border: 10px solid #6b36ba;
  border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}

.bordershine {
  display: flex;
  margin: 20px;
  border-width: 10px;
  border-style: solid;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
  border-image-slice: 10;
  border-image-source: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
<div class="bordershine">
  <div id="header" class="border">
    <img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'> Hard Candy by IshikaruTanaka
  </div>
</div>

border-image - сокращенное свойство, которое включает border-slice, поэтому, если вы установите его позже, оно заменит предыдущее border-slice

Вы также можете использовать только border-image, как вы делали с .border

body {
  background-color: BLACK;
  background: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_KSExlbMQsT842613856.jpg') repeat;
}

#header {
  padding: 10px;
  align-items: center;
  background: WHITE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
}

.border {
  position: relative;
  z-index: -1;
  border: 10px solid #6b36ba;
  border-image: url('https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_pa75I1OyXe388988805.jpg') 30 round;
}

.bordershine {
  display: flex;
  margin: 20px;
  border-width: 10px;
  border-style: solid;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px rgba(0, 0, 0, 0.05) inset;
  border-image: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%) 10;
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
<div class="bordershine">
  <div id="header" class="border">
    <img src='https://userimages-akm.imvu.com/userdata/05/31/59/66/userpics/Snap_9cGq7M7RLK201862878.gif' alt='[Spinning Logo]'> Hard Candy by IshikaruTanaka
  </div>
</div>
...