高さ可変の角丸長方形ボックスを実現する純粋な CSS テクノロジー - so easy_html/css

高さ可変の角丸長方形ボックスを実現する純粋な CSS テクノロジー - so easy_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:04

オリジナル

1217 人が閲覧しました

前回の記事では、純粋なCSSを使用して丸みを帯びた長方形のフレームを作成するための知識をまとめ、最終的に希望のスタイルを作成しました。 Web デザインでは、可変幅の角丸長方形ボックスが多く使用されます。一部の Web ページでは、コンテンツを表示するために固定幅の角丸長方形ボックスを使用できません。ここで、拡張してみましょう。私たちの考えでは、純粋な CSS テクノロジーを使用して、可変幅の丸い長方形のフレームを作成できるでしょうか?答えは「はい」で、とても簡単です。

牛ブリスケットのビデオでは、牛ブリスケットの先生が既製の画像を切り取って、5 つの部分からなる方法で丸い長方形のフレームをデザインします。この方法は画像画像のデザインです。ブリスケット先生のこのスタイルのステップ。原理を理解すると、可変幅の角丸長方形フレームが実際には固定幅の角丸長方形フレームを変形したものであることがわかります。このビデオでは、最終的に右側の境界線をタイリングすることで可変幅が実現されています。私自身の考えについて話します。角丸長方形ボックスの実装原理は前の記事で紹介しました。最後に、

タグを配置できる限り、固定幅の角丸長方形ボックスも実装しました。中央左右の境界線の長さがテキストに応じて変更できる場合は、可変幅の角丸長方形フレームを実装すると非常に便利です。

このアイデアを念頭に置いて、1 日の調査後 (このプロセスはスキップできません)、border の属性を比較し、情報を検索することで、最終的に border の重要な属性である _width、_height を発見しました。
この属性は、高さまたは幅が他の属性の値に依存することを意味します。

これが事実であれば、私たちのニーズは達成できます。

以下は私の具体的なデザインプロセスです (原理を理解していればとても簡単です):

高さが固定された丸い長方形のフレームを確立します。プロセスは前の記事と同じです:

<!--可变高度的圆角矩形框的设计-HTML代码-->    <div>        <div id="categorycenter" class="divbox">            <div class="div1"></div>            <div class="div2"></div>            <div  id="divmiddle">                <p>类别管理</p>                <p>新闻管理</p>                <p>添加新闻</p>            </div>            <div class="div2"></div>            <div class="div1"></div>        </div>    </div><div>

ログイン後にコピー

/*固定高度的圆角框的制作*/.divbox {    width: 580px;    margin: auto;    vertical-align: text-bottom;}.div1 {    background: #999999;    border-left: #999999 solid 3px;    border-right: solid 3px #999;    margin: 0px 6px;    height: 3px;    overflow: hidden;}.div2 {    background: #FFF;    border-left: #999999 solid 3px;    border-right: solid 3px #999;    margin: 0px 2px;    height: 3px;    overflow: hidden;}.divmiddle {    height: 285px;    border-left: #999999 solid 3px;    border-right: solid 3px #999;}

ログイン後にコピー

次に、高さを変更できるように中央の divmiddle タグの境界線のスタイルを設定します。

/*可变高度的圆角矩形框-CSS代码*/#categorycenter {    float: left;    _height: 200px;    width: 200px;    margin-bottom: 10px;    border-image-repeat: repeat;}    #categorycenter p {        text-align :center ;        margin-top :20px;        margin-bottom :35px;    }#divmiddle {    border-left: 3px solid #999;    border-right: 3px solid #999;    _height:200px;    overflow: hidden;}

ログイン後にコピー

divmiddle タグの境界線のスタイルを変更するときは、次の点に注意してください。まず、それらが大きなラベル categorycenter の下に配置されていることを理解します。最初にこのラベルを再設計し、次に divmiddle ラベルの境界線を設計する必要があります。最終的な効果は次のとおりです。

p のスタイルを変更します。タグを付けて間隔を変更します。大きくすると、下の写真のようになります。

隣の固定幅の角丸長方形フレームと比較すると、違いがよくわかります。これもテストです。私たちのデザインの効果は非常に優れており、評価に値します。

この探索の過程で、さまざまな問題により、テキストが境界線からはみ出たり、境界線が合わなくなったり、空白部分が大きくなったりして、さまざまなデバッグを行う以外に方法はありませんでした。このプロセスの後、float や margin などの属性の使用を頭から手に移し、必要なスタイルを見つけて、標準的なスタイルを見つけました (ああ、このプロセスは楽しいと思います)。これは一種の鍛錬であり、最終的に自分の考えを検証できるようになると非常に気分が良くなります。

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。