CSSで枠線を半透明にする方法 | sakura*sakura
ご注意この記事は 2年以上前 に書いたものです。現在は状況が異なる可能性がありますのでご注意ください。 #border { -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; background-color: rgba(255,255,255,0.9); /* 背景の設定 */ border: 10px solid rgba(0,0,0,0.3); /* ボーダーの設定 */ border-radius: 20px; /* 角丸 */ -webkit-border-radius: 20px; -moz-border-radius: 20px; }
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
