文字相关样式
颜色 (Color)
透明度：
opacity: 0.1;
opacity: 0.5;
opacity: 0.9;
RGBA：
color: rgba(255, 0, 0, 0.6);
注意: RGBA是在RGB的基础上多了控制alpha透明度的参数。
文本阴影
语法:
text-shadow:
h-shadow(必需。水平阴影的位置。允许负值)
v-shadow (必需。垂直阴影的位置。允许负值)
blur(可选。模糊的距离。)
color(可选。阴影的颜色);
图片7.png
text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
CSS3 @font-face 规则
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的
图片8.png
firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
使用您需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
<style>
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
</style>
边框样式
图片9.png
圆角边框 (Border)
图片10.png
语法
border-radius: length/% ;
border-radius: 一个值； //四个角都一样
border-radius: 值1 值2； //值1表示左上角、右下角；值2表示右上角、左下角
border-radius: 值1 值2 值3； //值1表示左上角；值2表示右上角、左下角；值3表示右下角
border-radius: 值1 值2 值3 值4；//左上角、右上角、右下角、左下角
CSS3 边框阴影
在 CSS3 中，box-shadow 用于向方框添加阴影：
语法 :
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
参数 :
图片11.png
图片12.png
div{
box-shadow: 10px 10px 5px #888888;
}
CSS3 边框图片
通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：
图片13.png
使用图片创建围绕 div 元素的边框：
div{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 hrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */}
图片地址border-image-source：url();
图片切片border-image-slice{1，4}
1、顶部内偏移区域27px处横切一刀
图片14.png
2、接着距离右侧内偏移区域27px竖切一刀
图片15.png
3、紧接着距离底部内偏移区域27px横切一刀
图片16.png
4、接着距离左侧内偏移区域27px竖切一刀
图片17.png
图片18.png
边框图片宽度border-image-width
边框图片外凸border-image-outset (x,y)
边框图片重复border-image-repeat
多重背景
CSS3 多重背景图片
CSS3 允许您为元素使用多个背景图像。
为 body 元素设置两幅背景图片：
body{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
背景渐变
渐变 (Gradients) ——线性渐变
background: linear-gradient(angle,颜色 0%,颜色 50% ,颜色 100%)
通过角度来确定渐变的方向。
后边的参数，表示渐变的颜色和位置。可以插入更多的颜色值。
可以用rgba产生渐隐效果
angle: left,right,top,buttom,30deg
repeating-linear-gradient 重复渐变
渐变 (Gradients) ——径向渐变
background: radial-gradient(颜色 0%,颜色 50% 颜色 100%)
<position>：主要用来定义径向渐变的圆心位置。
length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值或纵坐标。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵标值。
bottom：设置底部为径向渐变圆心的纵标值。
<shape>：主要用来定义径向渐变的形状。
circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。
<size>：主要用来确定径向渐变的结束形状大小。
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；
块级元素居中
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
2.已知宽度和高度
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
position:absolute;
left:50%;
top:50%;
网友评论