0

はとborder-top-colorはです。グラデーションは、およびの上部の色から下部の色に移行することを目的としています。#9b9c9dborder-bottom-color#f6f9fcborder-leftborder-right

border-left-imageと とborder-right-imageをborder-top-colorどのように組み合わせるのborder-bottom-colorですか?

HTML

<a class="button-style">Evil Whales</a>

CSS

.button-style
{
 background: linear-gradient(to bottom,
   rgba(129,232,117,1) 0%,
   rgba(129,232,117,1) 50%,
   rgba(62,179,48,1) 51%,
   rgba(62,179,48,1) 100%);

 border-top-color: #9b9c9d;

 border-left-image: linear-gradient(to bottom,
   rgba(155,156,157,1) 0%,
   rgba(246,249,252,1) 100%);

 border-bottom-color: #f6f9fc;

 border-right-image: linear-gradient(to bottom,
   rgba(155,156,157,1) 0%,
   rgba(246,249,252,1) 100%);

 border-style: solid;
}
4

2 に答える 2

1

2 つのグラデーションを重ねて、 と を使用background-sizeしpaddingてbackground-clipを描画できborderます。

.button-style {
  background: linear-gradient(to bottom, rgba(129, 232, 117, 1) 0%, rgba(129, 232, 117, 1) 50%, rgba(62, 179, 48, 1) 51%, rgba(62, 179, 48, 1) 100%) no-repeat
  /* use for background */
  , linear-gradient(to bottom, rgba(155, 156, 157, 1) 0%, rgba(246, 249, 252, 1) 100%)
  /* use for border */
  ;
  background-size: 100% 100%, auto auto;
  background-clip: content-box, border-box;
  padding: 3px;
}
html {
  padding: 3em;
  background: gray;
<a class="button-style">Evil Whales</a>

于 2016-03-10T23:03:56.340 に答える
0

Chrome、Firefox、IEだけでは機能しませんが、機能します。

background: linear-gradient(to bottom,
  rgba(129,232,117,1) 0%,
  rgba(129,232,117,1) 50%,
  rgba(62,179,48,1) 51%,
  rgba(62,179,48,1) 100%);
border-image: linear-gradient(to bottom,
  rgba(155,156,157,1) 0%,
  rgba(246,249,252,1) 100%) 25 30 10 20 repeat;
border-image-repeat: stretch;
border-width: 4px;

border-left-imageおよび関連するプロパティがないことに注意してください。残念ながら、よく文書化された CSS プロパティの 1 つではありません。

于 2016-03-10T22:14:08.233 に答える