放假回家的第一篇博客。坚持更新哦。
文本新增样式
1.opacity
opacity属性是css新增的属性，主要是用来设置元素的不透明度的。属性值为0-1之间，0是不透明度为0、1是不透明度为1，数值越大越不透明。举个例子：设置一个黑色背景颜色，设置opacity为0.5，即为半透明的黑色。
div{
width: 400px;
height: 400px;
background-color: black;
margin: 200px auto;
opacity: 0.5;
}
这个属性只能满足于一个元素的要求，如果在设置背景不透明度的同时还需要文字的不透明度时，此属性就满足不了了，就该使用rgba了。下面就是rgba。
2.rgba（背景模糊文字清晰、文字模糊背影清晰）
rgba是red、green、blue、alpha的缩写，它有四个参数，分别是r红色、g绿色、b蓝色、不透明度。rgba与rgb的主要起区别就是rgba有第四个控制不透明度的参数。前三个参数的值均是在0-255之间，第四个的值在0-1之间。rgba是综合了rgb和opacity的功能。
来个例子把
div{
width: 400px;
height: 400px;
background-color: rgba(255, 255, 0, 0.5);
margin: 200px auto;
}
div p{
font: 30px/400px "arial black" ;
text-align: center;
color: rgba(255, 0, 0, 0.8);
}
有了rgba这个属性就可以同时为多个元素设置不透明度，以实现更多较为复杂的设计啦。
3.文字阴影（text-shadow）
text-shadow为文字添加阴影。可以为文字与添加多个阴影，阴影值之间用逗号隔开。每个阴影值都是由元素在X和Y方向的偏移量、模糊半径(即模糊程度)和颜色值组成。
文字阴影呢，是可以是其更加有立体感，让文字在屏幕上看起来不是平平的，而是有它自己的动感在里面的。使用文字阴影这个属性可以制作出来浮雕文字。所谓浮雕就是让文字不那么死板，显得有立体感。
p{
font: 120px "arial black";
text-align: center;
margin: 200px;
color: black;
text-shadow: 5px 5px 5px deeppink,10px 10px 10px pink;
}
4.文字排版（文字可以从右往左排列。两条属性配合使用）
文字排版的话主要是实现古人的读书方式，自右向左读的，呈现在网页上的话要如何实现。有一个属性direction可以实现。单独使用direction这个属性是不够，还需要与unicode-bidi: bidi-override配合使用才能实现。
direction：ltr、rtl。从左向右、从右向左。
p{
font: 120px "arial black";
text-align: center;
margin: 100px;
color: black;
direction: rtl;
unicode-bidi: bidi-override;
}
5.文字溢出显示省略号（四条属性配合使用）
white-space：nowarp
overflow：hidden
text-overflow：ellipsis
还有一个隐藏的条件：盒子不能靠内容撑开
如果不满足这四条，效果是出不来滴。往往第四个隐藏条件容易被忽略。
盒模型新增样式
1.盒模型阴影（box-shadow）
盒模型的阴影跟文字阴影很相似，区别就是比文字阴影多了几个属性值，其中最重要的是有一个可以控制阴影的大小。
box-shadow：num1 num2 num3 num4 阴影颜色 阴影类型（内阴影、外阴影），默认的阴影类型是外阴影，设置内阴影（insert）。num4的值就是控制阴影的大小，正常的阴影会跟盒子的大小一样，如果设置值小于盒子大小阴影往里缩、大于盒子大小会往外扩的。
.box{
width: 400px;
height: 400px;
background-color: pink;
margin: 200px auto;
box-shadow: 5px 5px 5px 5px brown;
}
2.box-sizing（border-box）width和height的值包括内边距和边框
通俗来讲，box-sizing属性的作用主要是控制盒子的宽高包不包含内边距和边框。W3C中的盒模型中的宽和高是指盒子内容区的宽和高并不包括内边距和边框。但是，box-sizing：border-box时，盒子的宽高就包括内边距和边框了。
设置这个属性不会影响整体的布局排版，从而解决在不影响布局的情况下调整元素的问题。
比如：在我们登录后者注册一个账号时，当我们输入文字或者密码时，文字或数字总是距离输入框有一定的距离，这就是使用box-sizing这个属性，而且并不会影响到整体的布局。
今天就先写到这把，下一篇写水平垂直居中的合集！！！！！