广告位联系
返回顶部
分享到

几个实用的CSS代码块分享给大家

css 来源:互联网 作者:酷站 发布时间:2022-06-10 20:50:06 人浏览
摘要

CSS是一门神奇的语言,用的好可以让页面看起来更优雅,用的不好不仅会给自己带来工作量,也可能会影响页面的美感。想要把CSS学完,并且牢牢记住,这个还真有点难度。一般常用的

CSS是一门神奇的语言,用的好可以让页面看起来更优雅,用的不好不仅会给自己带来工作量,也可能会影响页面的美感。想要把CSS学完,并且牢牢记住,这个还真有点难度。一般常用的我们会写,因为用的多了,如果是遇到不常用的属性,估计只能靠“百度”了。本文总结了笔者在实际项目中遇到的CSS问题,感觉有点意思,就记录下来。

使用css 实现三角形、多边形等不规则形状

如果是单纯实现一个三角形,特别是等腰三角形,我们可以采用border的方式来实现:

1

2

3

4

5

6

7

div {

    margin: 100px auto;

    width: 0;

    height: 0;

    border: 50px solid;

    border-color: transparent transparent red;

}

运行结果:

如果我们要实现多边形,我们可以考虑使用裁剪的方式,裁剪出多边形的形状。

clip-path:使用裁剪的方式用于创建元素的可显示区域。裁剪后,区域内的部分为显示,区域外的部分则隐藏。clip-path可选的值有很多,例如:

  • inset():矩形
  • circle():圆形
  • ellipse():椭圆
  • polygon():多边形
  • path():任意形状

polygon有两种参数需要传入,一种是可选的填充规则,省略不传则为默认值,通常来说不传;另一种是三对或者更多的坐标值,坐标值按照笛卡尔坐标系,顺序为“上右下左”,分别指定每个点的坐标,坐标采用距离原点的百分比或者具体的px。

1

2

3

div {

    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); // 绘制一个菱形

}

运行结果:

1

2

3

div {

    clip-path: polygon(50% 0px, 100% 25%, 75% 100%, 25% 100%, 0px 25%); // 五边形

}

运行结果:

flex布局下实现文本省略号展示效果

单个元素如果是flex布局无法实现省略号的效果,因此至少需要两层。父元素设置为flex布局,子元素设置省略号展示。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// html

<div class='flex'>

    <div>前置内容</div>

    <div class="flex-content">这是一段很长的文字放在段落中间并且需要使用省略号展示</div>

    <div>后置内容</div>

</div>

// css

/* 父元素设置为flex布局 */

    .flex{

      display: flex;

      border: 1px solid red;

      width: 300px;

    }

    /* 需要省略的元素,需要设置flex:1和min-width:0 */

    .flex-content {

      text-overflow: ellipsis;

      overflow-x: hidden;

      white-space: nowrap;

      flex: 1;

      min-width: 0;

    }

运行结果:

实现自定义dash虚线分割线

采用背景图片渐变的方式:

运行结果:

使用重复性渐变实现分割线

repeating-linear-gradient

1

2

3

4

5

6

7

8

// css

.dash {

    width: 100%;

    height: 30px;

    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);

    background-size: 24px 6px;

    background-repeat: repeat-x;

}


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • CSS3浏览器兼容的介绍

    CSS3浏览器兼容的介绍
    一、浏览器兼容 1.1、概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核
  • CSS元素定位之通过元素的标签或者元素的id、cl

    CSS元素定位之通过元素的标签或者元素的id、cl
    大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观,更好
  • 微信小程序纯CSS实现无限弹幕滚动效果

    微信小程序纯CSS实现无限弹幕滚动效果
    啥也不说,先上效果图 实现背景 产品:我们需要一个弹幕滚动效果,类似于微博热搜那种实时评论,但是我们的数据是固定的20条,你让他
  • 使用CSS构建强大且酷炫的粒子动画效果

    使用CSS构建强大且酷炫的粒子动画效果
    粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。 当然,不使用 HTML + CSS 的主要
  • flex:1的详细介绍

    flex:1的详细介绍
    简单的来说一下在别人问你这个问题的时候怎么来回答它 前端新人,如有错误求大佬指出~求教???? 情景复现 大佬提问:你知道flex: 1;的更深
  • 新的CSS伪类函数 :is 和 :where()示例介绍

    新的CSS伪类函数 :is 和 :where()示例介绍
    在编写 CSS 时,有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如,如果您想对标题中的 b 标签进行颜色调整,我
  • 纯CSS打字动画的实现方法

    纯CSS打字动画的实现方法
    在一些技术网站中,经常会看到这样一种展示效果:逐个显示一段文本中的字符,模拟出一种打字的效果。通过这种方式可以显著地提升网
  • 实现el-form每行显示两列底部按钮居中效果的教程

    实现el-form每行显示两列底部按钮居中效果的教程
    el-form 每行显示两列,底部按钮居中 问题: 以前的解决办法是:el-col,el-row。但是这里只有一个el-form-item的label数据是已知的,其余项都是循
  • CSS实现六边形的图片效果的代码

    CSS实现六边形的图片效果的代码
    前言 在CodePen上看到一个有意思的效果: 这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧 实现思路
  • CSS浮动引起的高度塌陷问题的详细介绍

    CSS浮动引起的高度塌陷问题的详细介绍
    正常页面布局 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 style *{ margin:0; padding: 0; } .content{ width:400px; border:1px solid #000; } .box{ width:200px;
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计