css
一杯充满泡泡的可乐
这个作者很懒,什么都没留下…
展开
-
css使用伪元素时遇到的层级问题
css原创 2022-06-07 14:23:10 · 659 阅读 · 0 评论 -
纯css实现文字走马灯
纯css实现文字走马灯主要用到了css3中animation,效果和代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial原创 2022-04-20 13:46:36 · 2221 阅读 · 0 评论 -
部分防御性CSS技能
部分防御性CSS技能1、长文本的处理方式.username { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}2、锁定滚动链接auto - 默认。元素的滚动会传播给祖先元素。contain - 阻止滚动链接。滚动不会传播给祖先,但会显示元素内的原生效果。例如,Android 上的炫光效果或 iOS 上的回弹效果,当用户触摸滚动边界时会通知用户。注意:overscroll-behavior原创 2022-02-28 11:21:01 · 104 阅读 · 0 评论 -
css3常用动画属性总结
css3常用动画属性总结1、text-stroke(仅支持Safari、Chrome)-webkit-text-stroke: 1px pink;第一个参数是描边的宽度,第二个参数是描边的颜色;通常使用这个属性,会和color:transparent;搭配使用,实现镂空字体的效果,如下示例所示 font-size: 40px; -webkit-text-stroke: 1px pink; color:transparent;2、border-radiusborder-radius原创 2022-02-25 11:05:27 · 676 阅读 · 1 评论 -
图片加载失败后CSS样式处理最佳实践
图片加载失败后CSS样式处理最佳实践//这是html<img src="zxx.png" alt="CSS新世界封面" onerror="this.classList.add('error');">//cssimg.error { display: inline-block; transform: scale(1); content: ''; color: transparent;}img.error::before { content: ''; positi原创 2020-11-09 09:36:00 · 339 阅读 · 0 评论 -
实用的css属性
实用的css属性禁用用户选中一个元素(element)的文本element { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10+ and Edge */ user-select: none; /* Standard syntax */}更改选中文本的背景颜色::selection { color: #ececec; background: #222831;}...原创 2020-10-12 14:34:28 · 109 阅读 · 0 评论 -
常见的css换行样式
常见的css换行样式1、内容超出省略号显示 h1 { width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }2、内容超出换行省略号显示 h1 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; displa原创 2020-09-15 10:07:12 · 2123 阅读 · 0 评论 -
textarea中带格式的数据,在页面展示时也携带上格式
textarea中带格式的数据,在页面展示时也携带上格式有时从后台返回的数据是textarea格式的,将格式也展示在页面上,可以如下写 <p style="white-space: pre-line;" v-html="recite.recitecont"></p>原创 2020-07-14 14:57:52 · 743 阅读 · 0 评论 -
css将img设置成黑白色的图片
css将img设置成黑白色的图片为img加上如下属性即可,实现效果img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }原创 2020-06-20 09:26:21 · 883 阅读 · 0 评论 -
原生的input实现没有边框,且点击时没有背景色和边框
input实现没有边框,且点击时只有光标,没有其他样式为input添加如下属性,即可实现点击时只有光标,没有其他样式input { outline:none; background:transparent; border:none; outline:medium; } *:focus { outline: none; background-color: transparent; }原创 2020-06-05 12:30:53 · 1506 阅读 · 0 评论 -
css实现文字分散显示
css实现文字分散显示为文字所在的容器添加如下属性即可div { text-align-last:justify; text-align:justify; text-justify:distribute-all-lines; // 这行必加,兼容ie浏览器 border: 1px solid red; width: 150px;}原创 2020-06-04 15:45:46 · 1926 阅读 · 0 评论