純粋な CSS_html/css_WEB-ITnose で丸みを帯びた長方形のボックスを作成するための知識のまとめ

背景のログイン ページを作成するときは、Web ページから角丸長方形のフレームを選択し、Photoshop で切り取って設定し、最後に必要なログイン ボックスの角丸長方形フレームを取得する必要があります。以下に示すように。

しかし、最新のシンクタンクのログイン ページにログインすると、その上の丸い長方形のフレームが消えます。最新のログイン ページは、丸い長方形のフレームがない QQ メールボックスのログイン ページと同じです。そこで、CSS を使用して自分で角丸長方形フレームを作成することを考えました。情報を検索し、いくつかの独自の使用方法を改善した結果、最終的に必要な純粋な CSS で設計された角丸長方形フレームを入手できました。

以下のアイデアについて説明します。 丸い長方形のフレームの難しい点は、角の丸い部分をどのように表現するかです。実際、角の丸い部分を拡大してみると、いわゆる角の丸い部分が表現されていないことがわかります。ラインがより調和的に見えるからといって、丸い角は実際には直角フレームの直角です。

これは拡大された丸い長方形のフレームです。丸い角の特定の構成がわかります。

原理を理解してください。以下はコードの実装部分であり、非常に簡単です:

<span style="font-family:KaiTi_GB2312;font-size:24px;"><%--制作圆角矩形的代码-HTML代码部分--%>            <div class="divbox">                <div class="div1"></div>                <div class="div2"></div>                <div class="divmiddle">                   主要内容                </div>                <div class="div2"></div>                <div class="div1"></div>            </div></span>

<span style="font-family:KaiTi_GB2312;font-size:24px;">/*圆角框的制作-CSS代码部分*/.divbox {    width: 580px;     }/*.div1 .div2 .divmiddle{    float :right  ;}*/.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 p,h3,btnLogin,btnCancel{    float :right ;}</span>

コードからわかるように、丸みを帯びた長方形のフレームが 3 種類の div タグによって結合され、設計されています。そして最後に丸みを帯びた長方形のフレームを形成します。ここで重要なのは、カバーされたコンテンツを非表示にするオーバーフロー属性です。これにより、読者はここでテクニックを考える必要があります。

次のステップは実際の戦闘です。次のコードを真ん中に追加します:

<span style="font-family:KaiTi_GB2312;font-size:24px;"><h3>牛腩新闻发布系统后台登录</h3>                    <img src="Images/步枪.jpg" alt="logo" height="150" width="150"/>                    <p>用户名：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></p>                    <p>密  码：<asp:TextBox ID="txtPassword" runat="server" TextMode ="Password"></asp:TextBox></p>                    <p>验证码：123456<asp:TextBox ID="txtCode" runat="server" CssClass ="txtcode" Width="104px"></asp:TextBox></p>                    <p><asp:Button ID="btnLogin" runat="server" Text="登录" /><asp:Button ID="btnCancel" runat="server" Text="取消" /></p>                    <div><div class ="footer">版权声明：&copy;<a href="http://niunun.javaeve.com">牛腩</a>  &<a href="http://www.tg029.com" target="blank">众志网</a></div></div></span>

通常の理解によれば、これも同様ですが、別の問題が発生します。以下のように、図:

丸い長方形のボックスの側面に空白があります。これは、

の使用によるものです。 h3> は比較的大きく、流れの端が開いているため、破断した部分がありました。この欠点は、通常のフローから

部分を削除することで修正できます。これは、float 属性です。午後の半分と 2 時間の継続的なデバッグの結果が次のとおりです。フロート アトリビュート、フローティング コントロール、および再配置を使用するこの効果は単純に見えますが、以下に含まれるプロセスは私自身の知識の要約と改善であり、私はこのプロセスに全身全霊を注いでいます。最終的に効果が出て、とても気持ちよかったです。もちろん、このデザイン効果には、フレーム全体を垂直方向の中央の線に移動するなど、まだ改善の余地があります。その場合は想像力を働かせてください。

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