予告:Raindrops1.344 丸と正方形のCSSクラスを追加します

1.407にてクラス名を変更します。誤:rd-squere 正:rd-square (rd-squere を既に使っている方は、styleは有効のまま維持します)

丸に整形して、hover正方形

品名 高さ 奥行 重量
ゴジラ 30 20 30 50kg
ゴジラ 30 20 30 50kg
ゴジラ 30 20 30 50kg
モスラ 36 26 20 38kg
モスラ 36 26 20 38kg
モスラ 36 26 20 38kg
ゴジラ 30 20 30 50kg
ゴジラ 30 20 30 50kg
ゴジラ 30 20 30 50kg
モスラ 36 26 20 38kg
モスラ 36 26 20 38kg
モスラ 36 26 20 38kg
<div style="width:300px" class="rd-round">
	<table>
	<tr>
		<td>品名</td>
		.......
	</tr>
	</table>
</div>

<div style="width:300px" class="rd-round">
<span style="background:url(https://www.tenman.info/wp3/raindrops/files/IMG00170.jpg);"></span>
</div>

hover時に、何もしない


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="width:300px" class="rd-round not-hover">
    <span>
        Lorem ipsum ...
    </span>
</div>

正方形

<div style="width:300px" class="rd-squere">
   <span style="background:url(https://www.tenman.info/wp3/raindrops/files/IMG00170.jpg);"></span>
</div>

R

<div style="width:30px;text-align:center" class="rd-round">
<span class="google-font-lobster f26 rd-alert"  style="border:1px solid currentColor">R</span>
</div>

コメントは受け付けていません。