样式属性和盒模型

新增样式属性

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 盒模型