このエントリーをはてなブックマークに追加

CSS の無駄に細かいと思われる tips シリーズ「border を無事に透明化」

読了目安 1分28秒

こんばんは!今夜は需要の少なそうな CSS の tips をお送りいたします。もしかしたら、使う日がやって来るかもしれないので、予習しとくように!

透明効果を使った border を無事に透明化する

ボーダーが無事に透明になっている状態

ボーダーが無事に透明になっている状態

初っ端から何のことやらってな、かなり限定的なtips来ました。このサイトでまさに使っているんですけど、background-clip: padding-box;という奴について語ります。

このサイトでは、周りの枠線をCSSのborderプロパティを使って表現しとります。

border: solid 6px rgba(59, 6, 6, 0.35);

rgba(59, 6, 6, 0.35) の部分で透明化しています。んで、通常そのままこれを描くと下記の画像みたいになります。

そのまま書いたborder、透明化された部分が下の黒に溶け込んでしまっています。

そのまま書いたborder、透明化された部分が下の黒に溶け込んでしまっています。

本来は、透明の枠が見えるのですが、黒地に溶け込んでしまっています。これを解決するには、下記のコードが必要!

background-clip: padding-box;

これを書くと、無事透明化されたボーダーが表示されます。
というわけで、ボーダーの透明化がきっと無事にいったことと思います。

ではでは!

このエントリーをはてなブックマークに追加
読了目安 0分31秒

ウエツハラについて

主に Web 系、アプリ系のネタを提供していくかもしれないサイトです。比較的雑多。

中の人

横浜でタネマキというコワーキングスペースをやっています。
コーヒースポット(2014年1月)」ってのを作りはじめました。最近は、iPhoneアプリの制作してます。

連絡手段など

info@uetsuhara.com
≫Twitter
≫Facebookページ

I love comments !

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です