liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のレイアウト関連 - clip属性

CSS3.0 ┗━CSS3.0のレイアウト関連

clip属性を使い表示領域を切り抜きできる。

※1. clip属性を有効にするためには下記設定必要。

  • position:absolute
  • overflow:hiddenn
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> clip属性</title>
   <style type="text/css">
        div {
            position:absolute; 
            font-size: 30pt;
            border:2px solid black;
            background-color: #ccc;
            width: 550px;
            padding: 5px;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div style="top:0px; clip:rect(16px 400px auto 30px);">
    rect(16px 400px auto 30px);</div> 
<div style="top:120px; clip:rect(24px 480px auto 60px);">
    rect(24px 480px auto 60px);</div> 
<div style="top:240px; clip:rect(36px 520px auto 90px);">
    rect(36px 520px auto 90px);</div> 
<div style="top:360px; clip:rect(36px auto auto 120px);">
    rect(36px auto auto 120px);</div> 
</body>
</html>

f:id:liguofeng29:20160203211207p:plain