MEMOBLOG

・・・・・・メモブログ・・・・・・

【囲み枠】1. (シンプル)直線・角丸線・線なし・余白

                                       

f:id:HITORIHITORI:20220313031943g:plain

 

いろんな囲み枠を少しずつメモしていきます。

最初は、シンプルな囲み枠のメモ。

                f:id:memo2022:20220304184344g:plain               


 1. 直線【solid】
 2. 角丸線【border-radius 
 3. 線なし【none】
 4. 枠線内側の余白【padding】

 

                  

1・直線【solid】       

※ 数字を替えて太さを調整。(border:数字px

 ⇩

本文を入力

<div style="border: 1px solid #949799;  padding: 20px;"> 本文を入力</div>

 

本文を入力

<div style="border: 3px solid #949799;  padding: 20px;"> 本文を入力</div>

 

 

 

2・角丸線【border-radius】  

※ 数字が大きくなると丸みが大きくなる。(border-radius: 数字px

 ⇩

本文を入力

<div style="border: 1px solid #949799; border-radius: 10px; padding: 20px;">本文を入力</div>

 

本文を入力

<div style="border: 5px solid #949799; border-radius: 10px; padding: 20px;"> 本文を入力</div>

 

本文を入力

<div style="border: 5px solid #949799; border-radius: 20px; padding: 20px;"> 本文を入力</div>

 

本文を入力

<div style="border: 5px solid #949799; border-radius: 30px; padding: 20px;"> 本文を入力</div>

 

 

 

3・線なし【none】      

 ⇩

本文を入力

<div style="border: none; background-color: #949799; color: #fff; padding: 20px;">本文を入力</div>

 

本文を入力

<div style="border: none; background-color: #949799; color: #fff; padding: 20px;border-radius: 10px;">本文を入力</div>

 

 

4. 枠線内側の余白【padding

※ 数字を替えて余白を調整。padding:数字px 

 ⇩

本文を入力

<div style="border: 1px solid #949799;  padding: 15px;"> 本文を入力</div>

 

本文を入力

<div style="border: 1px solid #949799;  padding: 10px;"> 本文を入力</div>

 

本文を入力

<div style="border: none; background-color: #949799; color: #fff; padding: 15px;">本文を入力</div>

 

本文を入力

<div style="border: none; background-color: #949799; color: #fff; padding: 10px;">本文を入力</div>

 

本文を入力

<div style="border: none; background-color: #949799; color: #fff; padding: 15px;border-radius: 10px;">本文を入力</div>

 

本文を入力

<div style="border: none; background-color: #949799; color: #fff; padding: 10px;border-radius: 10px;">本文を入力</div>

 

 

 

 【囲い枠】 1.(シンプル)直線・角丸線・線なし・余白 

 1. 直線【solid
 2. 角丸線【border-radius 
 3. 線なし【none
 4. 枠線内側の余白【padding】