分享几个实用的CSS代码块

掘金   发布时间:2022-06-06 16:02:43   作者:诸葛小愚   我要评论
这篇文章主要介绍了分享几个实用的CSS代码块,CSS是一门神奇的语言,用的好可以让页面看起来更优雅,用的不好不仅会给自己带来工作量,也可能会影响页面的美感,接下来雄安边围绕主题展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

前言:

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

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

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

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。

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

运行结果:

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

运行结果:

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

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

// 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

// 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;
}

总结

本文记录了几个可能会用到的CSS代码块,下次如果还遇到类似的问题,就不用无脑的百度了,直接复制代码即可。

到此这篇关于分享几个实用的CSS代码块的文章就介绍到这了,更多相关CSS代码块内容请搜索得牛网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持得牛网!

相关文章

  • css实现文字断裂效果的示例代码

    本文主要介绍了css实现文字断裂效果的示例代码,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-20
  • css实现左上角飘带效果的完整代码

    这篇文章主要介绍了css实现左上角飘带效果的完整代码,代码分为html和css两部分组成,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-18
  • css实现右上角飘带效果的完整代码

    本文通过实例代码给大家介绍了css右上角飘带效果,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-03-18
  • CSS3实现指纹特效代码

    本文通过实例代码介绍了CSS3实现指纹特效,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-03-16
  • 企业开发CSS命名BEM代码规范实践

    这篇文章主要为大家介绍了企业开发CSS命名BEM代码规范的实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-08
  • CSS实现九宫格布局(自适应)的示例代码

    本文只展示自适应布局的方案。不展示手动指定宽度的那种方案,通过实例代码给大家介绍的非常详细,对CSS实现九宫格布局(自适应)的示例教程感兴趣的朋友一起看看吧
    2022-01-24
  • css3 实现文字闪烁效果的三种方式示例代码

    这篇文章主要介绍了css3 实现文字闪烁效果的三种方式示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编
    2021-04-25

最新评论