分享几个实用的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图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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
header跳转和include包含问题详解
2012/09/08 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
浅谈webpack组织模块的原理
2018/03/10 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
python 正则式使用心得
2009/05/07 Python
python利用hook技术破解https的实例代码
2013/03/25 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python实现扫描ip地址的小程序
2019/04/16 Python
python实现门限回归方式
2020/02/29 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
党员教师群众路线个人整改措施
2014/10/28 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS