ホームページ > 記事 > ウェブフロントエンド > HTMLで境界線の丸めを実装する例を詳しく解説
HTMLで境界線の丸めを実装する例を詳しく解説
- Y2Jオリジナル
- 2017-05-24 09:53:554670ブラウズ
この記事では主にHTMLで角丸長方形を簡単に実装する方法を詳しく紹介し、p+cssと位置決めで角丸長方形を実装する方法を説明します。興味のあるお友達は、
質問: p+css と配置を通じて角丸長方形を実現するにはどうすればよいですか?
ソリューションの概要:
内容: まず、6c04bd5ca3fcae76e30b72ad730ca86d タグ内に大きなレイヤーを追加します (大きなレイヤーは、全体的な大きな フレームを修正するために使用されます)。次に、大きなレイヤーには 4 つの小さなレイヤー (4 つ) が含まれます。小さなレイヤーに4つの丸い角を配置します（PSを使用して楕円形を事前に作成し、その後スライスツールを使用して画像を切り取ります））
スタイル: 4acfc30a1e3cb74de3e961be1b11e17dタグ内に設定されているCSSが必要です。 属性: 1.
位置
: 相対; 3 背景色;
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 スタイルはインラインです。スタイル: インラインタイプ、埋め込みタイプ、外部タイプ。 【関連おすすめ】1.
2.
htmlは周囲に固定されたテーブルを実現し、上下左右にスクロールできます3. よく使用されるHTMLタグの詳細な説明フロントエンド開発
4. マーキータグによるスクロール効果を実現する純粋な HTML コード
5. HTML で個人履歴書を作成するコード例
以上がHTMLで境界線の丸めを実装する例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。