CSS 文字溢出 、变量、渐变、伪类三角形

发布时间：2024年01月14日

1、文字溢出省略号：

文字单行溢出

overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行

多行文字溢出

overflow: hidden;// 溢出隐藏
text-overflow: ellipsis;// 溢出用省略号显示
display:-webkit-box;// 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
-webkit-line-clamp:3;// 显示的行数

2、css变量

详情查看：https://blog.csdn.net/weixin_43825473/article/details/107890413

CSS变量又称CSS自定义属性，通过在css中自定义属性--var与函数var()组成，var()用于引用自定义属性。谈到为何会在CSS中使用变量，以下使用一个示例讲述。

声明变量的时候，变量名前面要加两个中横线(--)

就像这样，定义的时候和属性KV，没有区别，加--主要是区分和默认css属性

(变量名大小写敏感的是)

    body {
      --foo: #7f583f;
      --bar: #f7efd2;
    }

变量的获取或使用

var()函数等于读取变量

 a {
      color: var(--foo);
      text-decoration-color: var(--bar);
    }

3、渐变

渐变分为线性渐变、径向渐变，在使用线性渐变的时候，使用角度以及百分比去控制渐变，会更加的灵活

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

！！渐变是图片，需要通过background-image来设置

线性渐变，颜色沿着一条直线发生变化

linear-gradient()

- 线性渐变的开头，我们可以指定一个渐变的方向

to left

to right

to bottom

to top

deg deg表示度数

turn 表示圈

- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，

也可以手动指定渐变的分布情况

repeating-linear-gradient() 可以平铺的线性渐变

 /*background-image: linear-gradient(red,yellow,#bfa,orange); */
 /* background-image:linear-gradient(red 50px, yellow 100px,green 120px,orange 200px) */
 background-image: repeating-linear-gradient(to right,red,yellow 50px);

/* 渐变(方向) */
 background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));

/* 渐变(角度) */
background: linear-gradient(88deg,#4DF7BF 0%,rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191,0))

边框渐变:

border有个border-image的属性，类似background也有个background-image一样,通过为其设置渐变颜色后，实现的渐变，后面的数字4为x方向偏移量

使用方式

    .border-grident {
      margin-top: 20px;
      width: 200px;
      height: 200px;
      border: 4px solid;
      border-image: linear-gradient(to right，#8f41e9，#578aef) 4;
    }

4、css伪类三角形

首先来看下示例：

<!DOCTYPE html>
<html>
  <head>
    <title>css-三角形</title>
    <style>
      .triangle {
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: orangered skyblue gold yellowgreen;
      }
    </style>
  </head>
  <body>
    <div class="triangle"></div>
  </body>
</html>

如果想要一个下的三角形，可以让border的上边框可见，其他边框颜色都设置为透明

 .triangle {
        width: 0;
        height: 0;
        border-top: 50px solid skyblue;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
      }

文章来源:https://blog.csdn.net/weixin_52663662/article/details/135522012
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章