爱站程序员基地新增样式属性
Web字体
通过
@font-face
属性,可以引入外部字体文件
@font-face {font-family:\"bf\";src: url(bf.TTF);}
字体图标
将图标制作成字体包, 这样我们就可以将图标当做一个字来对待,对齐设置大小和颜色,实现图标的变色.
矢量图标库
文本阴影
text-shadow: h-shadow(x) v-shadow(y) blur(模糊半径) color(颜色)
1、水平偏移量 正值向右 负值向左
2、垂直偏移量 正值向下 负值向上
3、模糊半径是不能为负值
4、可以有多个影子，用逗号隔开
5、案例:浮雕文字
凹:
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
凸:
text-shadow: -2px -2px 1px #fff, 2px 2px 1px #000;
文字模糊:
text-shadow:0 0 100px rgba(0,0,0,0.5);
文字描边:
-webkit-text-stroke: 4px pink;
盒子阴影
box-shadow: h-shadow(x) v-shadow(y) blur(模糊半径) spread(扩展范围) color(颜色) inset(是否内嵌,可省略)
盒子阴影生成器
倒影
-webkit-box-reflect
生成倒影,支持
above
below
right
left
添加间距:
-webkit-box-reflect: below 10px;
添加渐变:
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
颜色HSL
HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度）
HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。
- Hue 是色盘上的度数（从 0 到 360）0 (或 360) 是红色，120 是绿色，240 是蓝色。
- Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。
- Lightness 同样是百分比值；0% 是黑色，100% 是白色。
p{background-color:hsl(120,65%,75%);}
圆角属性
.box{border-radius:8px;}.d1{border-radius:4px 8px;}.d2{border-radius: 4px/8px;}
CSS3盒子模型(怪异盒子模型)
CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
content-box
: 对象的实际宽度等于设置的 width 值和 border、padding 之和 (默认方式)
border-box
： 对象的实际宽度就等于设置的 width 值，即使定义有 border 和 padding 也不会改变对象的实际宽度，即 ( Element width = width ), 我们把这种方式叫做 css3 盒模型
