css3 练习

css3 文本效果

css3中包含几个新的文本特征

在本章中您将了解一下文本属性

text-shadow

box-shadow

word-wrap

word-break

css3 的文本阴影

css3中，text-shadow 属性适用于文本阴影。

Text shadow effect!

实例

给标题添加阴影：

h1

{

　　text-shadow:5px 5px 5px #FF0000;

}

css3 box-shadow 属性

css3中 box-shadow 属性适用于盒子阴影

实例

div{

　　box-shadow:10px 10px 5px #888888;

}

给阴影添加颜色

div{

　　box-shadow:10px 10px grey;

}

给阴影添加一个模糊效果

div{

　　box-shadow:10px 10px 5px grey;

}

在::brfore 和 ::after 两个伪元素中添加阴影效果

实例

#boxshadow{

　　position:relative;

　　box-shadow:1px 2px 4px rgba(0,0,0,.5);

　　padding:10px;

　　background:white;

}

#boxshadow img{

　　width:100%;

　　border:1px solid #8a4419;

　　border-style:inset;

}

#boxshadow::after{

　　content:'';

　　position:absolute;

　　z-index:-1;

　　box-shadow:0 15px 20px rgba(0,0,0,0.3);

　　width:70%;

　　left:15%;

　　height:100px;

　　bottom:0;

}

阴影的一个使用特例是卡片效果

实例

div.card{

　　width:250px;

　　box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

　　text-align:center;

}

css3 Text Overflow 属性

css3 文本溢出属性指定应向用户如何显示溢出内容

实例

p.test1{

　　white-space:nowrap;

　　width:200px;

　　border:1px solid #000000;

　　overflow:hidden;

　　text-overflow:clip;

}

p.test2{

　　white-space:nowrap;

　　width:200px;

　　border:1px solid #000000;

　　overflow:hidden;

　　text-overflow:ellipsis;

}

css3的换行

css3中，自动换行属性允许您强制文本换行，即使这意味着分裂它中间的一个字；

实例

允许长文本换行：

p{word-wrap:break-word;}

css3 单词拆分换行

css3单词拆分换行属性指定换行规则：

实例

p.test1{

　　word-break:keep-all;

}

p.test2{

　　word-break:break-all;

}

新文本属性

属性 - 描述

hanging-punctucation 规定标点字符是否位于线框之外。

punctuation-trim 规定是否对标点字符进行修剪。

text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。

text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。

text-justify 规定当text-aligin 设置为 “justify” 时所使用的对齐方法。

text-outline 规定文本的轮廓。

text-overflow 规定当文本溢出包含元素是发生的事情。

text-wrap 规定文本的换行规则。

word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。

css3 字体

css3 @font-face 规则

实例

<style>

　　@font-face

{

　　font-family:myFirstFont;

　　src:url(sansation_light.woff);

}

div

{

　　font-family:myFirstFont;

}

</style>

使用粗体文本

您必须添加另一个包含粗体文字的@font-face 的规则：

实例

@font-face

{

　　font-family:myFirstFont;

　　src:url(sansation_bold.woff);

　　font-weight:bold;

}

css3 字体描述

描述符 值 描述

font-family name 必须 规定字体的名称

src url 必需 定义字体文件的url

font-stretch ...

font-style normal italic oblique

font-weight normal bold

unicode-range

css3 2d 转换

我们可以移动 比例化 反转 旋转 和拉伸元素

2D 变换方法

translate()

rotate() scale() skew() matrix()

实例

div

{

　　transform:rotate(30deg);

　　-ms-transform:rotate(30deg);

　　-webkit-transform:rotate(30deg);

}

translate（）方法

translate()方法，根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。

实例

div

{

　　transform:translate(50px,100px);

　　-ms-transform:translate(50px,100px);

　　-webkit-transform:translate(50px,100px);

}

translate 值（50px,100px） 是从左边元素移动50个像素，并从顶部移动100像素

rotate()方法 在一个给定度数顺时针旋转的元素，负值是允许的，这样时间元素逆时针旋转。

实例

div

{

　　transform:rotate(30deg);

　　-ms-transform:rotate(30deg);

　　-webkit-transform:rotate(30deg);

}

rotate值（30deg） 元素顺时针旋转30度。

scale()方法 改元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

实例

-ms-transform:scale(2,3);

-webkit-transform:scale(2,3);

transform:scale(2,3);

scale(2,3) 转变宽度为原来的大小的2倍，和其他原始大小3倍的高度。

skew()方法

语法

transform:skew(<angle>[,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0 ，参数为负数表示向相反方向倾斜。

skewX(<angle>);表示只在X轴（水平方向）倾斜。

skewY(<angle>)；表示只在Y轴（垂直方向）倾斜。

实例

div

{

　　transform:skew(30deg,20deg);

　　-ms-transform:skew(30deg,20deg);

　　-webkit-transform:skew(30deg,20deg);

}

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

matrix()方法

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转 缩放 移动（平移） 和倾斜功能

实例

利用matrix()方法旋转div 元素30度

div

{

　　transform:matrix(0.866,0.5,-0.5,0.866,0,0);

　　-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);

　　-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);

}

新转换属性

transform 适用于2D或3D转换的元素

transform-origin 允许您更改转化元素位置

2D 转换方法

函数 描述

matrix(n,n,n,n,n,n) 定义2D转换，使用六个值的矩阵。

translate(x,y) 定义2D转换，沿着X和Y轴移动元素。

translateX(n) 定义2D转换，沿着X轴移动元素。

translateY(n) 定义2D转换，沿着Y轴移动元素。

scale(x,y) 定义2D缩放转换，改变元素的宽度和高度。

scaleX(n) 定义2D缩放转换，改变元素的宽度。

scaleY(n) 定义2D缩放转换，改变元素的高度。

rotate(angle) 定义2D转换， 在参数中规定角度。

skew(x-angle,y-angle) 定义2D倾斜转换，沿着X和Y轴。

skewX(angle) 定义2D倾斜转换，沿着X轴。

skewY(angle) 定义2D倾斜转换，沿着Y轴。

css3 3D 转换

css3 允许您使用3D转换来对元素进行格式化。

rotateX() 方法 围绕其在一个给定度数X轴旋转的元素。

实例

div{

　　transform:rotateX(120deg);

　　--webkit-transform:rotateX(120deg);

}

rotateY()方法

rotateY()方法 ， 围绕其在一个给定度数Y轴旋转的元素。

实例

div

{

　　transform:rotateY(130deg);

　　--webkit-transform:rotateY(130deg);

}