新增样式属性
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 盒模型