- 最小幅と最小高さのCSSレイアウトを作成する必要がありますが、ブラウザーサイズの80％に拡張されます。
- メインのdivの角は丸みを帯びています（CSS3がサポートされていないため、画像を使用しています）。ただし、上下と左右の角の間を走る画像もあります。これは、ドロップシャドウ効果も提供します。
- 課題は、position：relativeとコーナーがposition：absolute（この時点ではすべて良好）であるdivがあるためですが、中央の画像を拡大してコーナー間のスペースを埋める必要があります。これが正しく機能しないことを除いて、divの終わりを超えて拡張されます。
- 私はまったく新しいアプローチを受け入れています。以下に画像とコードを含めていますが、画像を使用するのではなく、背景色を使用するコードで自由に解決してください。
これが私が達成しようとしていることです：
コンテナの画像は次のとおりです。
ここにいくつかのコードがあります...
HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="pageWrapper">
<div class="contentWrapper">
<span class="top-left"></span>
<span class="top-middle"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-middle"></span>
<span class="bottom-right"></span>
<div class="content">
<p>
Lorem ipsum dotor sit amet, consectetur adipiscing elit.
Ut viverra lectus vitae est ullamcorper a tempus est commodo.
Phasellus et pulvinar risus. Cras quis aliquet odio. Ut condimentum porta mi ultrices elementum.
Maecenas feugiat magna at tellus convallis congue. Aenean tincidunt rutrum varius. Aenean nec eros id odio dapibus faucibus.
Pellentesque blandit gravida erat id sodales. Etiam nunc odio, pharetra nec aliquam a, gravida at metus. Nullam dapibus vulputate blandit.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper lectus ut sapien scelerisque
vitae ullamcorper mauris venenatis.
</p>
</div>
</div>
</div>
</body>
CSS：
body {
background-color: #eeeee7;
}
.pageWrapper {
margin: 0px auto; /* centers the div horizontally */
min-width: 900px;
min-height: 430px;
height: 80%;
width: 80%;
background-color: red;
}
.contentWrapper {
position: relative; /* makes our corners absolute relative to our container not our browser window */
background-color: yellow;
height: 100%;
width: 100%;
padding-right: 34px;
padding-left: 34px;
padding-top: 155px;
}
.top-left,
.top-right {
position: absolute;
height: 155px;
width: 34px;
background-color: blue;
}
.bottom-left,
.bottom-right {
position: absolute;
height: 29px;
width: 34px;
}
.top-left {
top: 0;
left: 0;
background-image:url('images/cornerLeftTop.jpg');
}
.top-right {
top: 0;
right: 0;
background-image:url('images/cornerRightTop.jpg');
}
.bottom-left {
bottom: 0;
left: 0;
background-image:url('images/cornerBottomLeft.jpg');
}
.bottom-right {
bottom: 0;
right: 0;
background-image:url('images/cornerBottomRight.jpg');
}
.top-middle {
position: absolute;
top: 0;
left: 34px;
height: 155px;
width: 100%;
background-image:url('images/headerMiddle.jpg');
}
.bottom-middle {
position: absolute;
bottom: 0;
height: 29px;
width: 100%;
background-image:url('images/footerMiddle.jpg');
}
.middle-left {
}
.middle-right {
}