1.灵活的背景定位
实现效果背景距离右边10px,底部10px
方法一：calc()
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat #58a;
background-position: calc(100% - 20px) calc(100% - 10px); //图片距离左边 底部的距离
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
请不要忘记在 calc() 函数 内部的 - 和 + 运算符的两侧各加 一个空白符，否则会产生解析错 误!
兼容问题：
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。
方法二：background-position
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat right 10px bottom 10px #58a;
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
方法三：background-origin
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat #58a;
background-origin:content-box; //内容区域为准 不包含padding，形成10px的距离。
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
2. 边框内圆角
实现效果
方法一：一般实现方式，两个元素可以实现。
代码略
方法二：一个元素来搞定 配合box-shadow
div {
outline: .6em solid #655;
box-shadow: 0 0 0 .34em #655;
border-radius: .8em;
width: 10em;
padding: 1em;
background: tan;
}
box-shadow 会刚好填补描边和容器圆角之间的空隙， 这两者的组合达成了我们想要的效果。
请注意，我们为 box-shadow 属性指定的扩张值并不一定等于描边的宽 度，我们只需要指定一个足够填补“空隙”的扩张值就可以了。这个值是多少呢？
相对于是：圆心到角的距离减去半径就好。一般差不多就是圆角的一半。
3. 条纹背景
linear-gradient学习地址: https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
水平条纹：
实现效果
background:linear-gradient(#fb3 50%,#58a 50%);//可调整该值查看不同的效果
background-size:100% 30px; //去掉此行就是对半分的背景
height:300px;
width:300px;
垂直条纹：
实现效果
background:linear-gradient(to right,#fb3 50%,#58a 50%);//可调整该值查看不同的效果
background-size:30px 100%; //去掉此行就是对半分的背景
height:300px;
width:300px;
斜向条纹：
效果1
background:linear-gradient(45deg,#fb3 50%,#58a 50%);//可调整该值查看不同的效果
background-size:30px 100%; //去掉此行就是对半分的背景
height:300px;
width:300px;
效果2
div{
background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0); background-size: 30px 30px;
height:300px;
width:300px;
}
4. 图形边框
效果一
div {
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,
#58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
边框动效
@keyframes ants { to { background-position: 100% 100% } }
div {
padding: 1em;
border: 1px solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;
animation: ants 12s linear infinite;
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
5. 垂直居中问题
6. 弹跳动画
/**
* Bouncing animation
*/
@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300px); }
90% { transform: translateY(360px); }
}
.ball {
width: 0; height: 0; padding: 1.5em;
border-radius: 50%;
margin: auto;
background: red radial-gradient(at 30% 30%, #fdd, red);
animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;
}
body {
background: linear-gradient(skyblue, white 450px, yellowgreen 0);
min-height: 100vh;
}
效果
#######7. 轨迹动画
@keyframes spin {
from {
transform: rotate(0turn)
translateY(-150px) translateY(50%)
rotate(1turn)
}
to {
transform: rotate(1turn)
translateY(-150px) translateY(50%)
rotate(0turn);
}
}
.avatar {
animation: spin 3s infinite linear;
}
.avatar {
display: block;
width: 50px;
margin: calc(50% - 25px) auto 0;
border-radius: 50%;
overflow: hidden;
}
.path {
width: 300px; height: 300px;
padding: 20px;
margin: 100px auto;
border-radius: 50%;
background: #fb3;
}
截图一部分效果
8. 状态平滑的动画
效果
@keyframes panoramic {
to { background-position: 100% 0; }
}
.panoramic {
width: 150px; height: 150px;
background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
animation-play-state: paused;
}
.panoramic:hover, .panoramic:focus {
animation-play-state: running;
}
<div class="panoramic"></div>
9. 简单的饼状图
//html
<div class="pie"></div>
//css
.pie {
width: 100px; height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, currentColor 0);
color: #655;
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite, bg 6s step-end infinite;
}
@keyframes spin {
to { transform: rotate(.5turn); } //turn是圈的意思
}
@keyframes bg {
50% { background: currentColor; } //currentColor是表示当前的color的值，很少有人用各大浏览器基本都支持。
}
效果
10. box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必需。水平阴影的位置。允许负值。
v-shadow: 必需。垂直阴影的位置。允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。
inset：可选。将外部阴影 (outset) 改为内部阴影。
单侧投影：
1.右边和底部都有
div {
width: 1.6in;
height: 1in;
background: #fb3;
box-shadow: 3px 3px 6px -3px black;
}
2.底部有投影
div {
width: 1.6in;
height: 1in;
background: #fb3;
box-shadow: 0px 5px 4px -4px black;
}
1
2
双侧投影：
div {
width: 1.6in;
height: 1in;
background: #fb3;
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;
}
双侧投影
11. 不规则的投影 filter（浏览器的支持不是很好，IE完全不支持）
当我们想给一个矩形或其他能用 border-radius 生成的形状(在“自 适应的椭圆”一节中可以看到一些示例)加投影时，box-shadow 的表现都 堪称完美。
但是，当元素添加了一些伪元素或半透明的装饰之后，它就有些 力不从心了，因为 border-radius 会无耻地忽视透明部分。这类情况包括:
�1. 半透明图像、背景图像、或者 border-image(比如老式的金质像框);
�2. 元素设置了点状、虚线或半透明的边框，但没有背景(或者当
background-clip 不是 border-box 时);
�3. 对话气泡，它的小尾巴通常是用伪元素生成的;
�4. 我们在“切角效果”一节中见过的切角形状;
- 几乎所有的折角效果，包括“折角效果”一节将提到的例子;
- 通过 clip-path 生成的形状。
box-shadow实现这些的效果
场景一：
场景一
<div class="speech"></div>
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));
}
.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;
}
场景二：
场景二
<div class="dotted">Dotted border</div>
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));
}
.dotted {
background: transparent;
border: .3em dotted #fb3;
}
场景三：
场景三
<div class="cutout">Cutout corners</div>
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));
}
.cutout {
border: .5em solid #58a;
border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%23fb3">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background-clip: padding-box;
}
