13.尚硅谷_css3_新增UI样式-文本新增样式（2）.wmv原创

啊，我们把今天的课我们来收个尾啊来。还有几个点没讲，文字描变跟文字排版了，是不是这两个字其实其实简单，咱们刚是不是已经讲到模糊了啊，所以这边我想给你们做一个效果，做一个什么样效果呢？模糊背景的一个效果啊，我们想做一个这个东西。啊，放到移动端去啊，大家看是不是有一张图片啊，图片底下是不是自己的一个背景。是不是这个能不能理解，OK，那我们来看看这种东西怎么做啊，OK。好，我把这个关掉。看下这个东西怎么做。来看这个图片，我们有没有。啊，比如说我们来做一个CTRLC。看零七，我们做个模糊背景。模糊背景好，反正已经讲到模糊了，那我们就干嘛模糊的全一点，OK，这里模糊背景怎么做？

好，首先我们来看这个结构啊，我们说做布局先分析结构是不是啊，你说这种东西应该是第几个结构。啊，看上去肯定是两个是不是啊，其实你想想应该有几个，应该有三个，还有一个在哪啊，还有一层是不是下面是不是有一层模糊的啊，应该是有三层的是不是，可是一般我们上来肯定先考虑两层是不是来个ID叫什么外号。是不是啊，OK，里面来一张，你们讲吧，好把那图片拿过来。Control thing。CTRLV，看哪张图片头像的意思是不是啊，咦，耶，还有啊。啊，怎么那么多周重要啊，没不没没好看看好这个这东西待会我们可能会用到啊，但我们可能用不到了，明年才能用到啊，比如说我们找一个什么阴麦这底下的什么。

来完三点接笔记吧，是不是来看一下现在我们做成什么样了？你看啊你看看啊，这个大小明显很不合适吧，是不是切记移动开开发给我加一个标签，叫做标签内幕是什么叫标，是不是这个标签以后我们会花一天的时间来找他啊，毕业聚后的时候。所以这个标签拼不出来，就自己喝酒去吧啊，这个标签必须每一个同学干嘛手写给他写出来完蛋，我要是写不出来怎么办啊，我也好久没写了啊，是不是有个什么content的啊，有一个叫YWD等于de d，是不是逗号？

I等于1.0杠等于no啊，我平我说实话我英语这个不咋地啊，我感觉我的英语不咋地，我能记住你们都能记住啊，OK，来看一下这点。发现是不是这么大了，你反正先不管，反正在移动开发一定要加什么这个标签呢，懂不懂，然后怎么办，我们说把这个稍微搞小一点，来一个他是不是直接可以写外是吧，来个24P。要不要太也来个24？有是不是很小了，是不是其实应该是。是吧？48只你。

哎。看他是多大吧，60乘以60吧，是吧？啊，是不是没有PX直接是64啊，先写PX也没关系，但我试一下。这个也是认识是不是？走你是不是就这么大看写行不行，我记得应该没问题，走你。啊，它也是可以的，这这个能不能理解啊，OK是不是外面现在有一个容器啊，外面这个容器我们也稍微的设计一下吧，来找到这个外是不是OK，来一个为100PX吧，是不是OK外是100PX啊，看他先给他一个背景八光的YPI。你看是不是在这边，那我们这个图片是不是有点马的，是不是那给他一些。

马来一个什么马上下没有吧。是不是应该是上。右下左是不是上跟左是不是上24，右零下零左14，看一下应该差不多了。过来了吧，差不多吧，是不是OK，那现在这个图是不是就过来了，现在咱们是不是要做这个模糊背景了，想想。这个模糊背景肯定是在我这个外号干嘛？肯定是他在上层外边，在上层模糊背景在下，在下面那一层是不要不要一个结构来充当这个模糊背景，要不要肯定要的吧，来个ID叫什么。BG嘛，就叫背景嘛，行不行，而且你这个背景的大小跟我这个害是不是应该模一样的是不是，那怎么样才能他们一模一样。他的为什么。

相对定位是不是就可以了。是不是，然后呢，我说你这个什么外底下的什么鬼BG干嘛，为什么然后呢，一顿就可以了。为零啊，这个原理应该知道吧，OK，然后呢，波特也为零是吧，我们也给他来个背景，这个背景给他来个黑色的，好，现在你能看见谁？是不是看见黑的，为什么？因为我黑的把你整个web遮起来，为什么？因为你是外先渲染再来渲染这个笔记的，懂不懂说它的培一该相对定位一个培为，呃，不是嘛，说他的。成成绩是不是要这坐在你这个什么web上面了，那我说你这个成绩是不是应该下去。那你的Z-X应该为负一。

是不是是不是得下去啊，就底下是不是下去了，下去的时候是看不到它了，怎么办。谁谁应该透明，你这个外部是不是应该要透明啊，你这个背景是不是要什么透明一点。能理解吗？那这样吧，我把他们俩换一换好不好？现在你应该能看到谁看到看到黑颜色吧，看到什么怪不这一什么，是不是现在把它变成什么rgba a吧，黑色是不是00.5吧，是不是现在是不是代表我黑色这一层是不是有透明的，你看是不是通过黑颜色这一层就可以看到下面粉色那一层了，是不是我再把你这个背景改成什么。URL改善这张图片呗，Image下这个什么点j repeat。是不是尺寸一样吗？尺寸不一样吧，是不是啊，也就是你知道，就是说你的这个白光的背景的尺寸是不是不一样，怎么办啊，这个明天也会讲白色光的，先记住想让这个尺寸一样的话，就白吧，百分百百分百来看下。

尺寸是不一样了，相当于我这张背景图的尺寸，跟着谁走？BG走，懂不懂，就是我的XY轴的大小都是百分百百分百，那不就是吗？平铺你整个区域吗？懂吗？本来你背景图你不指定它的话，它干嘛本身有有有多大，那它就是。多大吗？你想这张背景图跟我这个区域一样大怎么办？我这张背图是不是我BG的，那我就让你干嘛跟BG一模一样大懂吗？那就两两个百分百只，你那我是不是跟B一模一样大懂不懂那还差一个什么效果？模糊吧，模糊怎么做？好，记住，这边的模糊是让整个元素模糊。

懂吗？怎么让整个元元素模糊？CSS里面有一个叫过滤器，怎么讲里面有个叫模糊的一个函数。懂吗？给他模糊程度是P，看有没有模糊。模糊了吧。这是让整个。元素模糊不是让整个背景模糊。这个是让整条元素去模糊，这这能不能理解啊，OK，那现在是不是就实现了一个模糊的背景。这能理解吗？啊，那这种需这种东西做一个模糊背景，也是我们经常见到一种需求，懂不懂，你这通过CSS怎么去实现一个模糊背景，应该也会做了。不讲OK。好，那基本上东西要讲的差不多了，我看还有什么东西没讲。好，那这个文字描边是不是啊啊，这个东西是个什么鬼呢？啊，看一看就行了。啊，这其实不是C3的东西啊，它准确来说它不算C上的东西，它需要大家知道为什么这个东西你发现它要加什么。

Y8K的全缀懂不懂，这是Y8K的内核里面才会有的一个属性，懂不懂它可以给文字去描边啊，来看一下。啊，这个直接贴过来了。这个就比较好弄了。文字描变是不是？你看现在是不是有个文字叫上硅谷，是不是让它居中吧？是吧，颜色是白色描一个边是啊，粉色四下素的边。走粉色。思想速度变啊，比我那个模糊文字是不是现在只有一个方向？是不是我的偏移，是不是只有一个方向，它是正好给你四，四个方向都给你去吗？描边懂不懂，那这种东西其实。啊，用用的也不多，知道一下就行了，能不理解OK，那他还有一个坑就是干嘛，你发现这个顺序上面这个问题也蛮大的。逗，我没问题了，YK4P居然没问题啊，没有，应该是我记错了啊，看一下。

没问题啊，OK，那这个顺序可以换啊，那这种东西我我不需要你们去记啊，这干嘛试一下就行了，懂不懂，OK，那这是文字描边，那最后什么文字啊。排版那就是C3里面新出来的啊，OK，看一下什么叫文字排版。来写一个CTRLC09文字排版。啊，这些东西比较杂啊，可是稍微记记就可以了啊，文字排版啊，今天东西还是比较简单的排。啊排好尴尬，来看文字排版什么意思啊？来看这是不是一个叫上规谷是不是？呃，我们来看这样吧，我把这个干掉，这个换成D吧。这个也换成div啊，OK，是这好，比如说我给这个div来一个边框吧。Y4为。

200PX啊，也为200PX啊，按照正常的读法的话，我们看你看是不是从。波的ex的实心是不是？给他上下为零，左右居中吧，凹凸。过来是不是，你看是不是这样排的文字，我们说古人读的话，是不是在这点文字还是反的，那怎么办啊，那是不是跟文字的排排版有关系啊，来看文字排版里面什么属性啊。什么direction控制文字的方向吧？是不是来看一下direction它是什么？有几个字。你看left to right吧，是不是OK，来看一下left to right是不是就是我们正常的。Left to right是吧，还有什么？

Right to left吧，你发现它有没有起作用？上硅谷，你看照理来讲上上肢是不是应该顺这边是不是啊，OK，你想让它这个作用起效果好一点，应该怎么办？啊，切记一定要配合UN的B啊，不是叫什么BD啊，来看一下UN的BD，来看一下，来看下这个值有个叫什么BD over right，来看一下走你。哎，我记得原来是的，应该我记错了，你看上个是不是从右往左开始读了，那么讲啊，这个是文字排版有关的，懂不懂？OK，那C3里面最重要的跟文字排版有关东西叫溢出显示省略号是不是啊，这个我也不知道为什么，面面试时候这个出现的频率实在太高了，好，我们来写一写怎么样，我就问大家溢出显示省略号需要几条样式？

一桌。溢出显示省略号。好，这应该怎么写？我知道还是这个点吧，是不是我字搞多一点是不是就可以了，是不是啊，这个我给他干掉，这就不要了，整点来看一下。一他换行了吧，首先不能让他换行。不知他换行应该是哪个属性，好多没有好多吧，是不是只有一个什么怎么办？不给我提怎么办？关掉重开么走，你应该不换好了。溢出了吧，怎么办？欧为先为给你截掉是不是OK，那记住C3里面有个属性，就是它是C3的属性。

你讲啊叫什么。T overflow，为什么？出现省略号是不是。你看现在是不是就出出现省略号了，其实它还有一条隐藏样式，我问你，如果这个元素是靠内容撑开的，还能出现省略号码，一般这个元素的一定要为blue。不然也是不能出现省略号的，能不讲，比如说我把它十换成什么，我记得是可以了，Inline block试一试。可以吗？好像可以，哎，是不是我想想。比如说这样吧。

依赖呢？哎，是不就不可以了，他是靠什么内容分开的吗？啊，因为我依赖不可也是我给他指定的宽高了吗？是的，宽高已经什么生效了吗？如果你这个什么东西是靠内容撑开的，还会艺术显示准备号码，不可能啊，说它有一个隐性条件，你这个盒子不能靠内容撑开的了。能理解啊，所以说要什么注意一下好只你你看是不是就可以了，它当然O还有一个值就是什么，那这是意思，不要出现省略号，直接减掉嘛，好像是跟欧差不多吧。这跟我是不是。一样的，有没讲说这个东西有点鸡肋啊，懂吧，OK，可是有同学说，哎，那你这边不是有个E吗？是不是啊，你看我olow我没有行不行。行不行不行，你必须得有texto的，所以说这三条样式是干嘛绑在一块走的啊，一术前列号把这三条样式给我计时，还有一个隐含的条件，你这个盒子不能靠内容撑开啊，OK，把这两点跟面试官交代清楚就可以了，那不讲好，那今天我们不讲其他了啊，就讲到文本新增样式啊。

今天内容比较多，也比较杂啊，自己把它整理成体系，上午是一个完整的体系啊，到我们讲到这个CSS的声明的优先级大化是一个完整的体系等等，那自体图标算一块内容，那新增原是我们讲的第一部分，就这个第一部分里面东西比较早。可是我觉得这个东西比较简单，完全是API啊，就你看过一遍，你就知道应该应该怎么去做了，没有任何需要大家去什么值得再去思考的地方，有没有讲好，OK，那今天我们就到这边。