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);
}
