ホームページ > 記事 > ウェブフロントエンド > HTML は角丸長方形の例を簡単に実装します
HTML は角丸長方形の例を簡単に実装します
- 高洛峰オリジナル
- 2017-03-12 17:05:492918ブラウズ
この記事では主に角丸長方形の例をHtmlで簡単に実装する方法を詳しく紹介し、p+cssと配置で角丸長方形を実現する方法を説明します。興味のあるお友達は、
質問: p+css と配置を通じて角丸長方形を実現するにはどうすればよいですか?
ソリューションの概要:
内容: まず、6c04bd5ca3fcae76e30b72ad730ca86d タグ内に大きなレイヤーを追加します (大きなレイヤーは、全体的な大きな フレームを修正するために使用されます)。次に、大きなレイヤーには 4 つの小さなレイヤー (4 つ) が含まれます。小さなレイヤーに4つの丸い角を配置します（事前にpsを使用して楕円形を作成し、その後スライスツールを使用して画像を切り取ります））
スタイル：4acfc30a1e3cb74de3e961be1b11e17dタグ内に設定されたCSS 属性が必要です: 1.
2. 幅と高さ; 4. 元の四隅の相対的な位置を調整するために使用されます。
小さなレイヤーの CSS を設定する場合、各レイヤーに必要な属性は次のとおりです:
1.position: 絶対;
2.方向属性 (
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>
<p id=p>
<p id=plefttop></p>
<p id=prighttop></p>
<p id=pleftbottom></p>
<p id=prightbottom></p>
</p>
</body>
</html> 注: コードで使用されている CSS スタイルは、インライン、埋め込み、外部の 3 つです。
以上がHTML は角丸長方形の例を簡単に実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。