コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > DIV+CSS で角を丸くする_html/css_WEB-ITnose

DIV+CSS で角を丸くする_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:31:52
オリジナル
959 人が閲覧しました

今日誰かに質問されて、勉強しました、ふふ、
原則は、1つのレイヤーに2〜3のレイヤーを追加することですが、これらのレイヤーには左端と右端のみがあり、上下には背景色があり、すべてが追加されます長さの違いがあります。これが私がやったことの例です:


高さ: 1px;
margin-left:4px;
margin-right:4px;
背景色: アクア;
border-left:solid 1px Aqua;
border-right:solid 1px Aqua;
}
.up2
{
height:1px;
margin-left:3px;
margin-right:3px;
border-left:solid 1px Aqua;
border-right:solid 1px Aqua;
}
.up3
{
height:1px;
margin-left:2px;
margin-right:2px;
border-left:solid 1px Aqua;
border-right:solid 1px Aqua;
}
.content
{
margin -left:1px;
margin-right:1px;
height:100px;/*ここのコントロールの高さ*/
/*background-color: Aqua;*/
border-left:solid 1px Aqua;
.DOWN1
{
オーバーフロー: 非表示
マージン-左: 2px;
マージン-右: 2px;
ボーダー左: ソリッド 1px アクア;
.down2
{
高さ: 1px;
マージン左: 3px ;
margin-right:3px;
border-left:solid 1px Aqua;
border-right:solid 1px Aqua ;
}
.down3
{
height:1px;
margin-left:4px;
margin-right:4px;
background-color: Aqua;
border-left:solid 1px Aqua;
border -right:solid 1px Aqua;
}
.cell
{
width: 50px;/*ここで幅を制御します* /
}





< div class="cell">


「>
」 div class="down2">
" " "

" " "

" " "

関連ラベル：
DIV+CSS实现圆角
ソース：php.cn
前の記事：Yahoo チームの経験: ウェブサイトのパフォーマンス最適化のための 34 の黄金律_html/css_WEB-ITnose 次の記事：Huang Cong: CSS+DIV で丸い境界線と影の効果を設定_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2249
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2387
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1997
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1884
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1954
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート