CSS中的溢出隐藏是一种常用的样式方法css隐藏元素，当内容超过容器的长度或高度时，可以使用该方法隐藏多余的部分，以保持页面美观整洁。 而当我们想要显示一部分隐藏内容，同时显示省略号来提醒用户还有更多内容需要查看时，我们可以使用CSS的text-overflow属性来显示省略号。 具体来说，text-overflow 属性定义在何处截断文本并添加省略号。 它有以下几个值： 1.clip：默认值表示直接截断文本，不显示省略号。 2. ellipsis：表示在被截断的文本处添加省略号（即“...”）。 3. string：表示在截断的文本处添加指定的字符串。 要实现省略号的显示，需要先固定元素的长度，然后结合text-overflow属性和overflow属性来实现。 具体代码如下：```css.text{ width: 200px; /*设置元素间距*/overflow:hidden; /*隐藏多余的部分*/ text-overflow: ellipsis; /*添加省略号*/white-space: nowrap; /* 强制文本显示在同一行 */}```其中white-space属性指定了如何处理元素中的空白字符，设置为nowrap可以使文本显示在同一行线路不受断线影响。 总之css隐藏元素，利用CSS的text-overflow属性可以轻松实现省略号的显示，有效提高页面的可读性和美观性。
1. 序言
相信大家对css3都不陌生，它是一个非常有趣和神奇的东西！ 有了css3，js就可以少写很多了！ 之前也写过关于css3的文章，也封装了一些css3的小动画。 我个人认为css3不难，用好难，用好就好。 最近，我也经历了一些css3的新特性（不是全部，我在工作中经常使用它们，或者我认为它们很有用），以及一些例子，我写了这个总结！ 希望这篇文章可以帮助你了解css3。 写这篇文章主要是让大家了解CSS3的一些新特性，以及基本用法，感受CSS3的魅力！ 如果你想用好css3，就要靠你继续努力学习，找到一些更有深度的文章或者书籍了！ 如果您还有其他功能值得推荐，欢迎补充！ 你们一起学习，一起进步！
看完这篇文章，代码就不用看太仔细了！ 这里主要目的是让大家了解css3的新特性！ 代码也是很基本的用法。 我给出的代码主要是为了让大家在浏览器中运行一下，供大家参考和调试。 不要只看代码。 如果只看代码，你不会知道该代码的功能是什么。 建议一边看代码一边看疗效。
2. 过渡
过渡是我在项目中使用最多的功能之一！ 我也相信是很多人用得最多的一个反例！ 我一般用它来让一些交互效果（主要是悬停动画）更加生动，不那么庸俗！ 好的，让我们输入下面的文字吧！
引用新手教程：CSS3过渡是元素逐渐从一种样式变为另一种样式的效果。 要实现此目的，必须指定两件事： 指定要添加的效果的 CSS 属性指定效果的持续时间。
2-1句型
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
栗子1个
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s
栗子2
/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s
里面的栗子是缩写模式，也可以将各个属性单独写（下面不再赘述）
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
3.动漫
动画在日常生活中也用得很多，主要是制作预设的动画。 动画效果与一些页面交互，效果应该和转场一样，这样页面才不会那么庸俗！
3-1. 句型
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
栗子1个
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;
栗子2
/*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear 2s;
栗子3
/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;
还有一个重要的属性
animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。 */
4. 形状变换
这部分分为2d转换和3d转换。 有什么好玩的，下面就列举几个！
4-1. 句型
变换：适合 2D 或 3D 变换的元素
变换原点：变换元素的位置（围绕哪个点进行变换）。 默认（x，y，z）：（50％，50％，0）
5. 选择器
css3提供的选择器可以让我们的开发更加方便！ 你们都需要明白这一点。 下面是css3提供的选择器。
图片来自 w3c。 我建议你去w3c看这篇文章（CSS选择器参考指南）css过度，那里的例子很容易理解。 我就不重复了。
上面提供的选择器基本上非常容易使用。 而且我觉得有些不是很常用，例如：root、:empty、:target、:enabled、:checked。 而且有几个是不建议使用的。 网上说性能差[attribute*=value]、[attribute$=value]、[attribute^=value]。 我从来没有用过这个，所以我不确定。
6. 影子
以前没有css3的时候，或者需要兼容低版本浏览器的时候，阴影只能用图片来实现，现在不需要了，css3提供了！
6-1. 句型
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
7. 边界 7-1。 边框图7-1-1。 句型
border-image: 图片url 图像边框向内倾斜 图像边框的长度（默认为边框的长度）用于指定边框外偏转的量（默认0） 填充方式 – 重复（repeat）、拉动拉伸或圆形（默认：拉伸）；
7-2. 边框圆角 7-2-1。 句型
border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/
8. 背景
本节主要讲css3提供的背景的三个属性
背景剪辑
制定背景轮廓（显示）区域
默认（从边框绘制）
从padding开始绘制（显示），不算边框，相当于把边框的背景给剪掉了！ （背景剪辑：填充框；）
只在内容区域绘制（显示），不包括padding和border，相当于剪掉了padding和border的背景！ （背景剪辑：内容框；）
9. 反思
这也可以说是一种反射，用起来还是蛮有趣的。
9-1。 句型
-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
10.文字换行
句型：word-break:normal|break-all|keep-all;
板栗与跑步疗效
句型：word-wrap:normal|break-word;
板栗与跑步疗效
除了省略号之外，我主要讲一下text-overflow的性质。 我之所以直接讲例子就是文本的三种写法——溢出、clip|ellipsis|string。 夹法并不美观高贵。 string 仅与 Maxthon 兼容。
超越省略号
这似乎有三行代码，没有换行符，超越隐藏，超越省略号
div
{
width:200px;
border:1px solid #000000;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
省略号之外的多行
<style>
div
{
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;
text-overflow: ellipsis;
padding:0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height:30px;
height:60px;
}
</style>
文字阴影
句子模式：文本阴影：水平阴影、垂直阴影、模糊距离和阴影颜色。
栗子：text-shadow:0010px#f00;
11. 颜色
这似乎是css3提供了一种新的颜色表示方式。
RGBA
一种是rgba（rgb是颜色值，a是透明度）
color: rgba(255,00,00,1);
background: rgba(00,00,00,.5);
HSLA
h：色调”、“s：饱和度”、“l：照度”、“a：透明度”
这个我在坐姿上学过，但是从来没有用过。 这是一个简单的反例。
color: hsla( 112, 72%, 33%, 0.68);
background-color: hsla( 49, 65%, 60%, 0.68);
12.渐变
css3的渐变可以说是一大亮点，提供了线性渐变、径向渐变、圆柱渐变（w3c和新手教程都没有提到，我是从一篇文章中了解到的，并且在微软浏览器中进行了尝试，但是是无效的方式写的！如果你知道如何使用它，请告诉我！谢谢）
对于渐变部分，由于使用灵活，功能强大，所以写起来很长，感觉写一点没什么意义。 我将为您发布一些链接教程。 文章里就不多说了，更何况我也开始向那些地方学习，而且他们写得比我好，比我还详细！
CSS3渐变
我们来谈谈CSS3渐变——线性渐变
我们来谈谈CSS3渐变——径向渐变
神奇的conic-gradient 圆柱梯度（这是我看到圆柱梯度的文章）
13.过滤器（过滤器）
css3的滤镜也是一个亮点css过度，功能强大，书写灵活。
14. 弹性布局
这里所说的灵活布局就是flex； 如果你想谈论这一部分，你必须把它全部说完。 距离讲座也已经很长时间了，所以我这里只贴出教程网址。 非常好的博客，非常详细！
Flex 布局教程：句子模式
Flex 布局教程：示例
15. 网格布局
网格布局为网格； 这个和flex是一样的，要讲就必须讲完。 这块内容和flex的内容类似，有点长。 我这里也贴个链接，也很详细！
网格布局手册
16. 多列布局
我也了解了这个，我觉得多栏应该还是蛮有用的。 其实我在项目中并没有使用过，所以下面简单说一下！ 举个例子！ 对于该属性，建议添加私有前缀，兼容性有待提高！
html
<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>
CSS
.newspaper
{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule:2px solid #000;
-webkit-column-rule:2px solid #000;
-mox-column-rule:2px solid #000;
}
17. 盒子模型定义
box-sizing属性，网上的说法是：该属性允许你以特定的形式定义匹配某个区域的特定元素。
你可能不知道自己在说什么。 简单粗暴的理解就是：当box-sizing: border-box时，border和padding都包含在元素的宽高内！如右图
当box-sizing: content-box时，border和padding不包含在元素的宽高内！如右图
18. 媒体查询
媒体查询就是监听屏幕规格的变化，不同规格时显示不同的样式！ 它是响应式网站的重要组成部分！ 但是因为我最近的项目使用的是rem布局。 所以媒体查询是没有用的！ 而且，媒体询问，它仍然值得一看！ 也许三天后就需要了！
栗子代码如下
<style>
body {
background-color: pink;
}
@media screen and (max-width: 960px) {
body {
background-color: darkgoldenrod;
}
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
19. 混合模式
混合模式，就像Photoshop上的混合模式一样！ 这一块，我知道，项目中从来没有用过，我想这个应该不会没什么用吧！
css3的混合模式有两种（background-blend-mode和mix-blend-mode）。 这两种写法和表现疗效非常相似！ 不同之处在于background-blend-mode用于同一元素的背景图像和背景颜色。 mix-blend-mode 用于元素和子元素的背景图像或颜色。 看下面的代码，差别就下来了！
这篇文章里有很多图片，大家快速浏览一下图片，看看效果如何！
背景混合模式 混合混合模式
发表评论