Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】borderのグラデに失敗した話

 どうも!LSSです!!

 

 マーカーを作るのに使った、background-image:lineargradient。

 

 ボックスの背景に対する指定でしたが、同類に、
border-image:lineargradient
というのがあり、border=枠線にグラデーションをかけられるようなので試みてみました。

 

 

失敗例

てすと

 

 

失敗例のコード

<div style="border: 15px solid; border-image: linear-gradient(135deg,red 0%,blue 100%);">てすと</div>

 

 

全体を囲む枠線をグラデさせたかったんですが

 これだけでは、四隅にだけ、指定したグラデーションの四角が出るだけみたいです。

 

 色々試みてて、一瞬だけ期待通りのものが出たのですが、調整しているうちにまた四隅だけになってしまいました^^;;;;

 

 これがうまくいけばまた表現の幅が広がるので、「最低限何が必要なのか」を今後、試していきたいと思います。

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^