文字が小さくなったり、不具合がおきたので、ひとまず、こちらでメモ的に保存。たぶんもう使わないけど。
/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;/*rem算出をしやすくするために*/
}
.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
.btn--orange,
a.btn--orange {
color: #fff;
background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
color: #fff;
background: #f56500;
}
a.btn--radius {
border-radius: 100vh;
}
.nomadBox3 {
padding: 1.5em;
margin: 1em 0;
color: #323232;
background:rgba(224,116,135,.07);/*背景色*/
}
.nomadBox3 p {
padding: 0;
margin: 0;
}
.box18{
margin:2em 0;
position: relative;
padding: 0.25em 1em;
border: solid 2px #ffcb8a;
border-radius: 3px 0 3px 0;
}
.box18:before,.box18:after
{
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px #ffcb8a;
border-radius: 50%;
}
.box18:after {
top:-12px;
left:-12px;
}
.box18:before {
bottom:-12px;
right:-12px;
}
.box18 p {
margin: 0;
padding: 0;
}
.box25{
position: relative;
background: #fff0cd;
box-shadow: 0px 0px 0px 5px #fff0cd;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}
.box25:after{
position: absolute;
content: '';
right: -7px;
top: -7px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ffdb88 #fff #ffdb88;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
margin: 0;
padding: 0;
}
.nomadBtn2 {
color: #FFF;
border-radius: 50em 50em 50em 50em;
background: #E07487;
padding: .7em 2em;
display: inline-block;
text-decoration: none;
}
キーワード:あんあん