css3边框、背景、宽高包含区域、文本效果、字体引入

五.CSS3

1、边框:

border-radius:圆角

box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 盒阴影

2、背景:

background-size:背景图片的尺寸

background-origin:content-box、padding-box(默认) 或 border-box 区域;

3、宽高包含区域

box-sizing:content-box(默认),border-box;

border-box设置后width/height包含border/padding/content

4、文本效果:

text-shadow:h-shadow v-shadow blur color文本阴影;

h-shadow 水平阴影位置,v-shadow垂直阴影位置,blur模糊距离,color阴影颜色;

word-wrap:自动换行;normal/break-word

5、字体引入

@font-face{

font-family:myfont;

src:url(‘sanation_light.ttf’),

url(‘sansation_light.eot’);

}

阿里图标字体库

6、多列:

column-count:规定元素应该被分隔的列数;

column-gap 属性规定列之间的间隔;

4、2D转换/3D转换

transform:对应的值有

translate(top,left):从其当前位置移动;

rotate(30deg):顺时针旋转给定的角度;

scale(1.1):元素尺寸增加或减少;

skew(30deg,20deg):翻转给定的角度,根据x轴和y轴;

css3边框、背景、宽高包含区域、文本效果、字体引入

上一篇:【nodeJS】shelljs 实现前端部署自动化必备技能


下一篇:解决:当前 .NET SDK 不支持将 .NET Core 3.0 设置为目标