HTML は角丸長方形の例を簡単に実装します-htmlチュートリアル-php.cn

HTML は角丸長方形の例を簡単に実装します

高洛峰

リリース： 2017-03-12 17:05:49

オリジナル

3003 人が閲覧しました

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

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

ソリューションの概要:

内容: まず、タグ内に大きなレイヤーを追加します (大きなレイヤーは、全体的な大きなフレームを修正するために使用されます)。次に、大きなレイヤーには 4 つの小さなレイヤー (4 つ) が含まれます。小さなレイヤーに4つの丸い角を配置します（事前にpsを使用して楕円形を作成し、その後スライスツールを使用して画像を切り取ります））
スタイル：<
head>タグ内に設定された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 サイトの他の関連記事を参照してください。