ホームページ > 記事 > ウェブフロントエンド > html は角丸四角形を実装します_html/css_WEB-ITnose
html は角丸四角形を実装します_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:15:261274ブラウズ
質問: div+css と配置を通じて角丸四角形を実装するにはどうすればよいですか?
ソリューションの概要:
内容: まず、4e67fd221312c223051b69fa62c46a6a タグ内に設定される CSS 属性には次のものが必要です:
1。位置: 相対
2. 幅と高さ;
4. 境界線 (元の 4 つの角の相対位置を調整するために使用されます。調整後、境界線の設定は削除できます)小さなレイヤーの CSS を設定します。各レイヤーに存在する必要がある属性は次のとおりです。
1.position: 絶対値;
3. 方向属性 (left、right、bottom、top)
4.background: url("")no-repeat;(角丸画像を全方向に導入)
以下は角丸長方形を実装するコードです:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>圆角制作</title> <style type=text/css> #p { position:relative; width:400px; height:200px; background:black; margin:auto; } #plefttop { position:absolute; width:50px; height:50px; background:url("images/11.jpg") no-repeat; } #prighttop { position:absolute; width:50px; height:50px; right:-9px; top:0px; background:url("images/22.jpg") no-repeat; } #pleftbottom { position:absolute; width:50px; height:50px; left:0px; bottom:-14px; background:url("images/33.jpg") no-repeat; } #prightbottom { position:absolute; width:50px; height:50px; right:-9px; bottom:-14px; background:url("images/44.jpg") no-repeat; } </style> </head> <body><div id=p><div id=plefttop></div><div id=prighttop></div><div id=pleftbottom></div><div id=prightbottom></div></div></body></html> 注: 私のコードはインラインです。 CSS スタイルには、インライン、埋め込み、外部の 3 つのタイプがあります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。