HTMLで境界線の丸めを実装する例を詳しく解説-htmlチュートリアル-php.cn

HTMLで境界線の丸めを実装する例を詳しく解説

Y2J

リリース： 2017-05-24 09:53:55

オリジナル

4743 人が閲覧しました

この記事では主にHTMLで角丸長方形を簡単に実装する方法を詳しく紹介し、p+cssと位置決めで角丸長方形を実装する方法を説明します。興味のあるお友達は、

質問: p+css と配置を通じて角丸長方形を実現するにはどうすればよいですか?

ソリューションの概要:

内容: まず、タグ内に大きなレイヤーを追加します (大きなレイヤーは、全体的な大きなフレームを修正するために使用されます)。次に、大きなレイヤーには 4 つの小さなレイヤー (4 つ) が含まれます。小さなレイヤーに4つの丸い角を配置します（PSを使用して楕円形を事前に作成し、その後スライスツールを使用して画像を切り取ります））
スタイル: <
head>タグ内に設定されているCSSが必要です。属性 : 1.
位置
: 相対; 3 背景色;

4. 調整後、境界線は設定
削除
)

小さなレイヤーの CSS を設定する場合、各レイヤーに必要な属性は次のとおりです: 1.position: 絶対値;

2.方向属性 (
left
,
right
,
bottom
, top) 4.background: url ("") no-repeat (全方向に丸い角を導入します写真)

以下は、角四角形の円コードを実装する方法です:

XML/HTML

コード

コンテンツをクリップボードにコピーします

<!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.

HTMLの無料ビデオチュートリアル

htmlは周囲に固定されたテーブルを実現し、上下左右にスクロールできます

3. よく使用されるHTMLタグの詳細な説明フロントエンド開発

4. マーキータグによるスクロール効果を実現する純粋な HTML コード

5. HTML で個人履歴書を作成するコード例

以上がHTMLで境界線の丸めを実装する例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。