分享几个实用的CSS代码块


Posted in HTML / CSS onJune 10, 2022

前言:

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

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

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

div {
    margin: 100px auto;
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent transparent red;
}

运行结果:

分享几个实用的CSS代码块

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

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

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

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

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

运行结果:

分享几个实用的CSS代码块

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

运行结果:

分享几个实用的CSS代码块

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

运行结果:

分享几个实用的CSS代码块

实现自定义dash虚线分割线

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

运行结果:

分享几个实用的CSS代码块

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

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代码块内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 #HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 #HTML / CSS
基于CSS制作创意端午节专属加载特效
聊聊CSS粘性定位sticky案例解析
Jun 01 #HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 #HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 #HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 #HTML / CSS
You might like
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
javascript定义函数的方法
2010/12/06 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
python使用tkinter实现简单计算器
2018/01/30 Python
python 重命名轴索引的方法
2018/11/10 Python
值得收藏的10道python 面试题
2019/04/15 Python
Django多数据库的实现过程详解
2019/08/01 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
教育专业个人求职信
2013/12/02 职场文书
环保建议书
2014/03/12 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
信息技术国培研修日志
2015/11/13 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL