分享几个实用的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中的选择符
Oct 17 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
HTML基础详解(下)
Oct 16 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 similar text计算两个字符串相似度
2015/11/06 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
python获取本地计算机名字的方法
2015/04/29 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Python函数返回不定数量的值方法
2019/01/22 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
学生会个人自荐书范文
2014/02/12 职场文书
竞聘书模板
2014/03/31 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers