<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding-top: 20px;
background:
radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px,
linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
background-color: slategray;
background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
}
div {
width: 100px;
height: 100px;
margin: 10px;
}
p {
background: rgba(240, 237, 235, .8);
padding: 6px 20px;
/* box-shadow: 0 2px 2px 0 #666; */
}
.pre {
background: rgba(240, 237, 235, .8);
padding-top: 20px;
margin-bottom: 50px;
border-radius: 8px;
font-weight: 600;
font-family: Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;
box-shadow: 0 2px 2px 0 #666;
}
.d1 {
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .4em #655;
outline: .6em solid #655;
/* border: .6em solid #655; */
}
.d2 {
background: linear-gradient(#fb3 33.3%,
#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;
}
.d3 {
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}
@keyframes ants {
to {
background-position: 100%
}
}
.d4 {
padding: 1em;
border: 1px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%
) 0 / .6em .6em;
animation: ants 12s linear infinite;
}
.d5 {
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url('http://csssecrets.io/images/stone-art.jpg');
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
}
.d6 {
background: #58a;
background:
linear-gradient(135deg, transparent 15px, #58a 0)
top left,
linear-gradient(-135deg, transparent 15px, #58a 0)
top right,
linear-gradient(-45deg, transparent 15px, #58a 0)
bottom right,
linear-gradient(45deg, transparent 15px, #58a 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.d7 {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: bottom;
box-sizing: border-box;
width: 5.9em;
height: 5.2em;
margin: .6em;
background: #fb3;
/* box-shadow: .1em .1em .3em rgba(0,0,0,.5); */
-webkit-filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
font: 200%/1.6 Baskerville, Palatino, serif;
text-align: center;
border-radius: .3em;
}
.d7::before {
content: '';
position: absolute;
top: 1em;
right: -.7em;
width: 0;
height: 0;
border: 1em solid transparent;
border-left-color: #fb3;
border-right-width: 0;
}
@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-right-color: transparent; }
}
.d8 {
font: bold 200% Consolas, Monaco, monospace;
/*width: 8.25em;*/
width: 15ch;
height: 40px;
white-space: nowrap;
overflow: hidden;
border-right: .05em solid;
animation: typing 8s steps(15),
caret 1s steps(1) infinite;
}
</style>
</head>
<body>
<h1>1. 背景与边框</h1>
<div class="d1"></div>
<p>依赖于描边不跟着圆角走，box-shadow却是会的，因此box-shadow 会刚好填补描边和容器圆角之间的空隙</p>
<pre class="pre">
// 边框内圆角
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .4em #655;
outline: .6em solid #655;
</pre>
<div class="d2"></div>
<p>“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要
小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。”</p>
<pre class="pre">
// 条纹背景 https://leaverou.github.io/css3patterns/
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;
</pre>
<div class="d3"></div>
<p></p>
<pre class="pre">
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
</pre>
<div class="d4"></div>
<p>好玩的蚂蚁行军边框</p>
<pre class="pre">
@keyframes ants { to { background-position: 100% } }
.marching-ants {
padding: 1em;
border: 1px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%
) 0 / .6em .6em;
animation: ants 12s linear infinite;
}
</pre>
<div class="d5"></div>
<p>
背景边框<br>
<em>background-clip</em> 切换 改变<em>background-position</em>的起始（左上角）位置：border/padding
</p>
<pre class="pre">
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url('http://csssecrets.io/images/stone-art.jpg');
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
// 缩写
background:
linear-gradient(white, white) padding-box,
url(stone-art.jpg) border-box 0 / cover;
</pre>
<h1>2. 形状</h1>
<div class="d6"></div>
<p>切角：一个线性渐变就可以达到目标（多个切角改变background-origin）</p>
<pre class="pre">
background: #58a;
background:
linear-gradient(135deg, transparent 15px, #58a 0)
top left,
linear-gradient(-135deg, transparent 15px, #58a 0)
top right,
linear-gradient(-45deg, transparent 15px, #58a 0)
bottom right,
linear-gradient(45deg, transparent 15px, #58a 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
</pre>
<div class="d7"></div>
<p>不规则投影 filter滤镜效果</p>
<pre class="pre">
div {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: bottom;
box-sizing: border-box;
width: 5.9em;
height: 5.2em;
margin: .6em;
background: #fb3;
/*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
-webkit-filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
font: 200%/1.6 Baskerville, Palatino, serif;
text-align: center;
}
.speech {
border-radius: .3em;
}
.speech::before {
content: '';
position: absolute;
top: 1em;
right: -.7em;
width: 0;
height: 0;
border: 1em solid transparent;
border-left-color: #fb3;
border-right-width: 0;
}
</pre>
<div class="d8">CSS is awesome!</div>
<p>打字效果<br/>调速函数steps()和cubic-bezier()作用是一样的，都可以作为animation-timing-function的属性值。<br/>
steps() 会根据你指定的步进数量，把整个动画切分为多帧，而且整个动画会在帧与帧之间硬切。<br/>
ch 单位表示“0”字形的宽度。在等宽字体中，“0”字形的宽度和其他所有字形的宽度是一样的。<br/>
右边框模拟闪烁光标。
</p>
<pre class="pre">
@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-right-color: transparent; }
}
div {
font: bold 200% Consolas, Monaco, monospace;
/*width: 8.25em;*/
width: 15ch;
white-space: nowrap;
overflow: hidden;
border-right: .05em solid;
animation: typing 8s steps(15),
caret 1s steps(1) infinite;
}
</pre>
<!-- <div class="d9"></div>
<p></p>
<pre class="pre">
</pre>
<div class="d10"></div>
<p></p>
<pre class="pre">
</pre> -->
</body>
</html>