css3
边框
一、css3边框圆角效果 border-radius
border-radius:5px 6px 7px 8px;
四个半径值分别是左上角、右上角、右下角、左下角，顺时针
border-radius好可以是百分比或者em，但兼容性目前不太好。
二、box-shadow是向盒子添加阴影。支持添加一个或者多个。
box-shadow: x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
| 值 | 描述 |
|---|---|
| X轴偏移量 | 必须，水平阴影的位置，允许负值。 |
| y轴偏移量 | 必须，垂直阴影的位置，允许负值。 |
| 阴影模糊半径 | 可选，模糊距离。 |
| 阴影扩展半径 | 可选，阴影的尺寸 |
| 阴影颜色 | 可选，阴影的颜色，省略认为是黑色。 |
| 投影方式 | 可选，inset为内部阴影方式，省略为外阴影。 |
添加多个阴影
.box-shadow{
box-shadow:4px 2px 6px #f00,-4px -2px 6px #000,0px 0px 12px 5px #33cc00 inset;
}
效果图
阴影模糊半径与阴影扩展半径的区别。
阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
三、border-image为边框应用图片
语法
颜色相关
一、颜色之RGBA
语法
color:rgba(R,G,B,A);
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。
百分数值的取值范围为：0.0% - 100.0%。
超出范围的数值将被截至其最接近的取值极限。
并非所有浏览器都支持使用百分数值。
A为透明度参数，取值在0~1之间，不可为负值。
二、颜色渐变
| 角度 | 用英文 | 作用 |
|---|---|---|
| 0deg | to top | 从下向上 |
| 90deg | to right | 从左向右 |
| 180deg | to bottom | 从上向下 |
| 270deg | to left | 从右向左 |
| to top left | 右下角到左上角 | |
| to top right | 左下角到右上角 |
CSS3 Gradient分为线性渐变linear和径向渐变radial.
线性渐变
线性渐变
参数：
| 角度 | 用英文 | 作用 |
|---|---|---|
| 0deg | to top | 从下向上 |
| 90deg | to right | 从左向右 |
| 180deg | to bottom | 从上向下 |
| 270deg | to left | 从右向左 |
| to top left | 右下角到左上角 | |
| to top right | 左下角到右上角 |
- 第一个参数省略时，默认为180deg
- 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
background-image:linear-gradient(to left,red,orange,yellow,green,blue,indigo,violet);
效果图
文字与字体
一、CSS3文字与字体 text-overflow 与 word-wrap
text-overflow用来设置是否使用一个省略标记(...)标识对象内文本的溢出。
语法
文本溢出省略写法
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
语法
normal为浏览器默认值，break-word设置在长单词或URL地址内部进行转行，此属性不常用，用浏览器默认值即可。
二、嵌入字体@font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
语法：
@font-face{
font-family:字体名称;
src:文字文件在服务器上的相对或绝对路径;
}
这样设置之后，就可以像使用普通字体一样在(font-*)中设置字体样式。
p{
font-size:12px;
font-family:"My Font";
/*必须项，设置@font-face中font-family同样的值*/
}
文本阴影text-shadow
text-shadow: X-offset Y-offset blur color
- X-offset:表示阴影的水平偏移距离，其值为正值时向右偏移，为负值时 向左偏移
- Y-offset:
- blur:是指阴影的模糊程度，不能是负值，如果值越大，阴影越模糊，反之越清晰，不需要阴影模糊可以设置为0
- color:可以使用RGBA
与背景相关的样式
一、background-origin
设置元素背景图片的原始起始位置
background-origin:border-box | padding-box | content-box;
效果
需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
二、background-clip
用来将背景图片做适当的裁剪以适应实际需要。
background-clip:border-box | padding-box | content-box | no-clip;
- 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。
- no-clip表示不裁切，和参数border-box显示同样的效果。
- backgroud-clip默认值为border-box。
三、background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸展。
background-size:auto | 长度值 | 百分比 | cover | contain
四、多重背景 multiple background
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；
用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
等同于
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
注意：
- 用逗号隔开每组 background 的缩写值；
- 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
- 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
- background-color 只能设置一个。
网友评论