Plain Experience – 面白い商品・サービスを紹介するブログです 
こんにちは！ CSSで学んだことをまとめています！
を書いたので、今回は、
border styleをgrooveにする
やり方をまとめておきます。
過去に書いたborder styleの記事も併せて参考にしてみてください。
目次
border styleをridgeにしてみる
■index.html(ボタンが1つ)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="main.css"> <title>Test</title> </head> <body> <button id="button">ボタン</button> </body> </html> |
■main.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#button { align-items: center; background-color: white; color: rgb(0, 196, 204); border-width: 15px; /*幅*/ border-color: rgb(0, 196, 204); /*色*/ border-style: ridge; /*スタイルをridgeにする*/ /*1行にまとめて書くことも可能です border: ridge 2px rgb(0, 196, 204); */ border-radius: 4px; font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
以下のようになります。
以上です！
他のborder styleと比較するとより理解が深まります。以下を参考にしてみてください。
solid
|
1 |
border-style: solid; |
double
|
1 |
border-style: double; |
groove
|
1 |
border-style: groove; |
inset
|
1 |
border-style: inset; |
outset
|
1 |
border-style: outset; |
dashed
|
1 |
border-style: dashed; |
dotted
|
1 |
border-style: dotted; |
まとめ
以上です！
本ブログでは他にも、CSSなど記事を書いているので参考にしてみてくださいね！
