ホームページ > ウェブフロントエンド > htmlチュートリアル > 矢印付きの CSS DIV ボックス、適応型高さ_html/css_WEB-ITnose

矢印付きの CSS DIV ボックス、適応型高さ_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:42:48
オリジナル
1115 人が閲覧しました



CSS实现带箭头のDIV方框
<スタイル>
s{
位置:絶対;
トップ:-20ピクセル;
*上:-22px;
左:20ピクセル;
表示:ブロック;
高さ:0;
幅:0;
フォントサイズ: 0; 
行の高さ: 0;
ボーダーカラー:透明透明 #666 透明;
ボーダースタイル:破線 破線 実線 破線;
ボーダー幅:10px;
}
div.container{位置:絶対;
トップ:30ピクセル;
左:40ピクセル;
フォントサイズ: 9pt;
表示:ブロック;
高さ:100ピクセル;
幅:200ピクセル;
背景色:透明;
*ボーダー:1px ソリッド #666;
}
i{位置:絶対;
トップ:-9px;
*上:-9px;
左:-10px;
表示:ブロック;
高さ:0;
幅:0;
フォントサイズ: 0;
行の高さ: 0;
ボーダーカラー:透明透明 #fff 透明;
ボーダースタイル:破線 破線 実線 破線;
ボーダー幅:10px;
}
.content{
border:1px ソリッド #666;
-moz-border-radius:3px;
-webkit-border-radius:3px;
位置:絶対;
背景色:#fff;
幅:100%;
高さ:100%;
パディング:5px;
*上:-2px;
*border-top:1px ソリッド #666;
*border-top:1px ソリッド #666;
*左境界線:なし;
*ボーダー右:なし;
*高さ:102ピクセル;
ボックスシャドウ: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
//互換性、考慮虑6及以前のバージョンの表
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* IE 8 の場合 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; 
}






CSS实箭头的边框,我觉得行吧^_^








ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート