CSS3基础笔记整理（一）

一、边框

1、圆角 border-radius：
2、阴影 box-shadow：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

X轴偏移量：必填，水平阴影位置，允许负值。
Y轴偏移量：必填，垂直阴影位置，允许负值。
阴影模糊半径：可选， 模糊距离， 只能是正值。
阴影扩展半径：可选， 扩展尺寸。
阴影颜色：可选，省略默认黑色。
投影方式：可选，设置 inset时为内部阴影，省略为外部阴影。

3、边框应用图片 border-image：

二、颜色

1、RGBA：
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

background-color:rgba(100,120,60,0.5);

2、 渐变：

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。
linear-gradient(渐变方向, 颜色起始点和结束点、可以有两个至多个色值…)

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

三、文字

1、text-overflow 与 word-wrap：

text-overflow用来设置是否使用一个省略标记（…）标示对象内文本的溢出。
word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

text-overflow：clip（剪切）| ellipsis （省略标记）
word-wrap：normal (控制连续文本换行) | break-world （边界内换行）

2、嵌入字体@font-face：
3、文本阴影text-shadow

四、背景

1、background-origin
设置元素背景图片的原始起始位置。
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

background-origin ： border-box | padding-box | content-box;

2、background-clip
用来将背景图片做适当的裁剪以适应实际需要。
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

background-clip ： border-box | padding-box | content-box | no-clip

3、background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

background-size: auto | <长度值> | <百分比> | cover | contain

4、多重背景

赏

谢谢你请我吃糖果

微信