CSS3笔记

为容器的四个内边距添加相同的数值（15px），但是容器内的文字让上下两边的内边距显得比左右两边更大一些。容器看起来并不协调。究其原因就是在水平方向上字体形状更加连贯，导致我们的眼睛认为垂直方向上的多余空间都是内边距。因此，我们在垂直方向上减少内边距，才能让四边的内边距看起来一致。

inherit 可以被应用到任何的 CSS 属性上，并且会根据父级元素的属性计算出恰当的值（如果是伪元素，那么就会根据当前元素属性来计算）。比如，让表单元素和页面其他元素具有相同的字体，无需一一指定，直接使用 inherit。

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CCFFFFFF', endColorstr='#99000000');
}
:root .class {
filter:none; /*处理IE9浏览器中的滤镜效果*/
background-color:rgba(0,0,0,0.6);
}

PhotoShop阴影效果转换成css中box-shadow

混合模式：PhotoShop提供了多种混合模式，但是CSS3只支持正常模式(normal)。
颜色： 阴影颜色。对应于CSS3阴影中的color值。
不透明度(Opacity)： 阴影的不透明度。对应于CSS3阴影的颜色rgba()中的a。
角度(Angle)：阴影的角度。
距离(Distance)：阴影的距离。根据阴影的角度和距离，可以计算出CSS3阴影中的h-shadow和v-shadow。
h-shadowt = Distance * cos(180 - Angle)
v-shadowt = Distance * sin(180 - Angle)
扩展(Spread)：阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。
大小(Size)：阴影的大小。
spread = Spread * Size
blur = Size - spread

box-shadow语法：

box-shadow: h-shadow v-shadow blur spread color inset;

text-shadow语法：

text-shadow: h-shadow v-shadow blur color;

text-shadow没有spread,所以不能完全实现。

<a href="javasript:" class="btn">我的按钮</a>.btn{
display: inline-block;
padding: 15px;
text-decoration: none;
font-size: 25px;
background-color: #b01c20;
color: #fff;
border: 1px solid #bfbfbf;
border-radius: 5px;
text-shadow: 0 1px #000;
box-shadow: 0px 0px 3px hsla(0,0%,26.6667%,0.8);
background: linear-gradient(90deg,#b01c20 0%,#f15c60 100%);
}

<div class="loading"></div>.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}