分享几个实用的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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JS模板实现方法
2013/04/03 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
js函数排序的实例代码
2013/07/01 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python  连接字符串(join %)
2008/09/06 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python简易远程控制单线程版
2018/06/20 Python
Django中的cookie和session
2019/08/27 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Python是怎样处理json模块的
2020/07/16 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书