覚えておいて損はない、CSSのみで画像を円形や三角形に切り抜く方法Border-width animation f... / CSSで画像を三角に切り抜く - Weblog ... / The Shapes of CSS他...全3件 円形に切り抜く場合は、border-radius: 50%;（より多くのブラウザーに対応する場合は、ピクセル数で記述）。border-widthの値を遷移させることで使って面白いエフェクトも。
1枚の画像からサイズ可変な罫線を表示する（1）：FirefoxとSafariのCSS - builder by ZDNet Japan
現在のWeb制作では、画像を使ってサイズ可変な罫線を表示する場合、辺やコーナー別に画像を用意して対応する。しかし、画像を作成するのに手間がかかる上に、画像の表示先として複数の要素（タグ）を用意する必要があるなど、HTML/XHTMLソースやスタイルシートの設定が複雑になるという問題がある。 それに対して、CSS 3ではborder-imageプロパティを利用することにより、1枚の画像からサイズ可変な罫線を表示する方法が提案されている。border-imageプロパティでは、ブラウザが1枚の画像を9つに分割して罫線の表示を行うので、これまでのように制作者が辺やコーナー別に画像を用意する必要がない。また、スタイルシートも などの1つの要素に適用するだけで設定できるというメリットがある。 Safari 3ではこの機能をサポートしており、-webkit-border-imageというプロパティで利
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SafariとChromeのCSS対応：文字や画像にマスクをかける - builder by ZDNet Japan