1.Css text-intent属性:段落首行缩进
将段落的第一行缩进 50 像素:
p
{
text-indent:50px;
}
2.box-shadow 属性:添加一个或多个阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:水平阴影,越大越右移,负值在左边
v-shadow:垂直阴影,越大越下移,负值在上边
blur:模糊的程度,值越大阴影边缘越模糊
spread:阴影的周长向四周扩展的尺寸
color:阴影的颜色
inset:将外部阴影 (outset) 改为内部阴影
div
{
box-shadow: 10px 10px 5px #888888;
}
效果:
.div{
box-shadow: 0 0 20px 5px ;
/* box-shadow: 0 0 20px 5px green;*/ /*也可以自定义颜色*/
}
3.CSS3 text-shadow 属性: 基础的文本阴影效果
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
4.gradient 渐变
线形渐变
颜色值沿着一条隐式的直线逐渐过渡。由linear-gradient()产生。
.linear-gradient {
background: linear-gradient(to right,
red, orange, yellow, green, blue, indigo, violet);
}
径向渐变
颜色值由一个中心点(原点)向外扩散并逐渐过渡到其他颜色值。由radial-gradient()函数产生。
.radial-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
重复渐变
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient()和repeating-radial-gradient()函数产生。
.linear-repeat {
background: repeating-linear-gradient(to top left,
lightpink, lightpink 5px, white 5px, white 10px);
}
.radial-repeat {
background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}
5.transform 允许我们对元素进行旋转、缩放、移动或倾斜
(1)rotate() 方法
通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转
值 rotate(30deg) 把元素顺时针旋转 30 度
(2)translate() 方法
元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
transform:translate(50px,100px);
(3)scale() 方法
通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
transform:scale(2,4); 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍
(4)skew() 方法
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度
(5)matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
6.CSS3 过渡 transition
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
7.css3 圆角属性
规则:
四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
一个值: 四个圆角值相同
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
8.CSS3 Text Overflow属性
text-overflow: clip;
例:文字太长用三个点显示
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
text-overflow:ellipsis
9.CSS3的换行
(1)英文字母换行
p {word-wrap:break-word;}
(2)
p.test1 {
word-break: keep-all; //完整英文单词换行
}
p.test2 {
word-break: break-all;
}
10. CSS3 动画 animation
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}