liguofeng29’s blog

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

CSS3.0のレイアウト関連 - box model、table、tdに影を追加する

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> box-shadow </title>
   <style type="text/css">
        div {
            width: 300px;
            height: 50px;
            border: 1px solid black;
            margin: 30px;
        }
    </style>
</head>
<body>
<div style="box-shadow: -10px -8px 6px #444;">
    box-shadow: -10px -8px 6px #444;左上影</div>
<div style="box-shadow: 10px -8px 6px #444;">
    box-shadow: -10px 8px 6px #444;右上影</div>
<div style="box-shadow: -10px 8px 6px #444;">
    box-shadow: -10px 8px 6px #444;左下影</div>
<div style="box-shadow: 10px 8px 6px #444;">
    box-shadow: 10px 8px 6px #444;右下影</div>
<div style="box-shadow: 10px 8px #444;">
    box-shadow: box-shadow: 10px 8px #444;</div>
<div style="box-shadow: 10px 8px 20px #444;">
    box-shadow: 10px 8px 20px #444;</div>
<div style="box-shadow: 10px 8px 10px -10px red;">
    box-shadow: 10px 8px 10px -10px red;</div>
<div style="box-shadow: 10px 8px 20px 15px red;">
    box-shadow: 10px 8px 20px 15px red;</div>
</body>
</html>

f:id:liguofeng29:20160203223255p:plain

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> box-shadow </title>
   <style type="text/css">
        table {
            width: 500px;
            border-spacing: 10px;
            box-shadow: 10px 10px 6px #444; 
        }
        td {
            box-shadow: 6px 6px 4px #444; 
            padding: 5px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</table>
</html>

f:id:liguofeng29:20160203223444p:plain