ヘルプ div 角の丸い問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ヘルプ div 角の丸い問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:18:20

オリジナル

1248 人が閲覧しました

これで、左上、右上、左下、右下の 4 つの角の丸いカッティング画像ができました。
div の背景色を角丸に設定するにはどうすればよいですか? divの四隅に4枚の写真を配置するにはどうすればよいですか?ヘルプ？

ディスカッションへの返信 (解決策)

ここでのデモ

<div class="box"> <div class="box-outer">    <div class="box-inner">        <p>sdfsdffffddsfdf</p>    </div><div><div>.box{background:url(左下) no-repeat left bottom}.box-outer{background:url(右下)no-repeat right bottom;}.box-inner{background:url(左上) no-repeat  left top;}p{background:url(右上) no-repeat right top;}

ログイン後にコピー

パディングの 4 つの方向の値を使用して画像の特定の位置を調整できます

CSS コード?1234567891011121314151617181920< ;divclass= ボックス">

) いや、...

ヒーロー?存在する？

各コーナーは次のようになります。たとえば、左下隅では次のように設定します
.box{
background:url(bottom left) no-repeat leftbottom;
padding-left: 13px;
パディング -bottom: 13px;
これは不可能ですか?

写真の周囲が透明になり、そのほとんどが黒と灰色になっているように見えます。次に、背景色はコーナー画像の色とできるだけ対照的なものにする必要があります。また、div の背景色を設定しないでください。本体の背景を継承させると、見た目が良くなります。画像の周りが透明になり、ほとんどが黒とグレーになります。次に、背景色はコーナー画像の色とできるだけ対照的なものにする必要があります。また、div の背景色を設定しないでください。ボディの背景を継承させると、見栄えが良くなります。

ここで必要なのは、背景色を含む div 領域を用意することです。 divの背景色は画像の色と同じである必要があります。オンラインには画像を必要としない例がたくさんあります

あなたの画像は透明になっているようです。その周りはほとんどが黒と灰色です。次に、背景色はコーナー画像の色とできるだけ対照的なものにする必要があります。また、divの背景色を設定しないで、本体の背景を継承させてください。

与えられたコードを4つの写真に追加するにはどうすればよいですか。ボディの色と一致する丸い角の外側の div

div の背景色を設定しましたか?

div の背景色を設定しましたか?

はい、設定完了です

CSSの角丸制作については、投稿者が詳しく解説した書籍「CSSの徹底設計と研究」を読むことができますので、参考にしていただければ幸いです。ポスター〜

小さな画像の隅が透明なので、これは扱いが困難です。div の背景色が本体の背景色と一致しない場合、このテクニックは失敗します

これです。小さな画像の隅が透明なので、div の背景色が本体の背景色と一致しない場合、このテクニックは失敗します

はい、ありがとうございます。このように設計する方法はありません。写真なしでインターネット上に記載されているデザインを変更します

border-radius: 5px