border-image を使って見出しに下線グラデショーンをつけたら、 Chrome や FireFox では問題ないのに、 Safari だと左と上の線が表示されていた。 border-image の書き方を変えたら Safari でも正しく表示されるようになった。 Safari は、バージョン12.1.2。 Safari で問題のあった書き方 ググるとよく紹介されている書き方と同じ。 Safari でも、 Chrome と同じように表示させたい。 border-bottom: 1px solid; border-image: linear-gradient(to right, #666 0%, #fff 100%); border-image-slice: 1; border-image で border-image-source に画像の URL を指定しないと、初期値 none
![[CSS] Safariでも使える border-imageで下線グラデーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/ddc6b7472cd67f5d5832a0658d2471bcdba3422d/height=288;version=1;width=512/https%3A%2F%2Fagohack.com%2Fwp%2Fwp-content%2Fuploads%2F2019%2F08%2Fcss3-logo.png)