html は角丸四角形を実装します_html/css_WEB-ITnose-htmlチュートリアル-php.cn

html は角丸四角形を実装します_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:15:26

オリジナル

1332 人が閲覧しました

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

ソリューションの概要:

内容: まず、タグ内に大きなレイヤーを追加します (大きなレイヤーは全体的な大きなフレームを修正するために使用されます)。次に、大きなレイヤーには 4 つの小さなレイヤーが含まれます (4 つの小さなレイヤーはそれぞれ丸い角を 4 つ配置します (PS を使用して楕円形を事前に作成し、スライスツールを使用して画像を切り取ります))

スタイル: タグ内に設定される 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&reg;">  <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 つのタイプがあります。