![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS专栏
CSS效果实现
黑无常De上帝
这个作者很懒,什么都没留下…
展开
-
波浪效果实现
HTML注意:bolang.png这张图片在设计的时候,头尾要能连接起来(就是要对称,效果会比较好)。<!--波浪效果--><div class="waveEffect"> <div class="waveContent"></div> <div class="wavePic"> <div class="waveImg"></div> </div></div>SCSS.wave原创 2021-12-17 14:30:25 · 315 阅读 · 0 评论 -
解决ElementUI中按钮列表中间有下划线的情况
<style> .el-table__fixed-right{ height: 100% !important; }</style>原创 2021-10-29 15:48:57 · 826 阅读 · 0 评论 -
基于bootstrap的图片循环滚动
1、引入放在head之外<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script><script type="text/javascript" src="js/jquery.SuperSlide.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script&g原创 2021-10-19 18:14:08 · 984 阅读 · 0 评论 -
CSS通过滤镜让图标变灰
HTML<a href='' class='icon'><img src='01.jpg' /></a>CSS.icon{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray原创 2021-10-19 18:13:08 · 321 阅读 · 0 评论 -
CSS实现立体字的效果
HTML<div class="text_solid">这里是测试文字</div>CSS.text_solid{ font-size: 32px; text-align: center; font-weight: bold; line-height:100px; text-transform:uppercase; position: relative; background-color: #333; color:#f原创 2021-10-19 18:11:34 · 1865 阅读 · 0 评论 -
CSS实现文字渐变效果
HTML<div class="text_signature " >这里是测试的文字</div>CSS.text_signature { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #ec2239, #40a4e2,#ea96f5); width: 320px;}原创 2021-10-19 18:10:07 · 94 阅读 · 0 评论 -
实现宽高等比例自适应
HTML<div class="scale"> <div class="item"> 这里是所有子元素的容器 </div> </div>CSS.scale { width: 100%; padding-bottom: 56.25%; height: 0; position: relative; }.item { position: absolute; width: 100%; h原创 2021-10-19 18:08:29 · 58 阅读 · 0 评论 -
字母大小写转换
p {text-transform: uppercase} // 将所有字母变成大写字母p {text-transform: lowercase} // 将所有字母变成小写字母p {text-transform: capitalize} // 首字母大写p {font-variant: small-caps} // 将字体变成小型的大写字母...原创 2021-10-19 18:03:04 · 79 阅读 · 0 评论 -
页面动画出现闪烁问题
在 Chrome and Safari中,当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果,下面的代码可以修复此情况:.cube { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; /* Other transform properties here */原创 2021-10-19 18:01:38 · 517 阅读 · 0 评论 -
CSS实现文字竖向排列
单列展示时.wrap { width: 25px; line-height: 18px; height: auto; font-size: 12px; padding: 8px 5px; word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/ }多列展示时.wrap { height: 210px; line-height: 30px; text-align: justify; writi原创 2021-10-19 17:59:05 · 1000 阅读 · 0 评论 -
CSS实现文本两端对齐
文本两端对齐.wrap { text-align: justify; text-justify: distribute-all-lines; //ie6-8 text-align-last: justify; //一个块或行的最后一行对齐方式 -moz-text-align-last: justify; -webkit-text-align-last: justify;}原创 2021-10-19 17:53:48 · 46 阅读 · 0 评论 -
css 选取第 n 个标签元素
first-child first-child 表示选择列表中的第一个标签。last-child last-child 表示选择列表中的最后一个标签nth-child(3) 表示选择列表中的第 3 个标签nth-child(2n) 这个表示选择列表中的偶数标签nth-child(2n-1) 这个表示选择列表中的奇数标签nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3,即小于 3 的标签。nth-原创 2021-10-17 14:51:44 · 345 阅读 · 0 评论 -
elementUI中表格中出现分割线解决办法
设置全局样式为.el-table__fixed-right{ height: 100% !important;}原创 2021-10-15 16:47:32 · 1443 阅读 · 0 评论 -
隐藏滚动条仍可以滚动
隐藏滚动条仍可以滚动.demo::-webkit-scrollbar { display: none; /* Chrome Safari */}.demo { scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ overflow-x: hidden; overflow-y: auto;}原创 2021-10-15 16:46:14 · 116 阅读 · 0 评论 -
不固定高宽 div 垂直居中的方法
1、方法一:伪元素和 inline-block / vertical-align(兼容 IE8).box-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; //微调整空格}.box { display: inline-block; vertical-al原创 2021-10-15 16:45:01 · 59 阅读 · 0 评论 -
css设置内容居中
1. 使用变换(Transform)(1)当元素的宽度和高度未知时;(2)卡片式弹出框中有多个子元素,其中一个焦点元素位于中心center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}2. 使用Flex(1)当有一个或多个元素要居中时;(2)当子元素是动态的并且大小未知时;(3)当有一行项目需要像页脚一样居中时。.parent { display:原创 2021-10-15 16:43:05 · 939 阅读 · 0 评论 -
HTML页面点击跳转时有背景
HTML页面点击跳转时有背景*{-webkit-tap-highlight-color:transparent;}原创 2021-10-15 16:41:11 · 160 阅读 · 0 评论 -
滚动条样式设置
1、滚动条样式设置注意:companyCultureData 是包含含有滚动条内容的外部Class/*滚动条设置*/.companyCultureData{ width: 100%; overflow: auto;}.companyCultureData::-webkit-scrollbar { width : 2px; height: 1px;}.companyCultureData::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ bo原创 2021-10-15 16:38:01 · 38 阅读 · 0 评论 -
CSS设置文字渐变色
从左到右的渐变background-image: linear-gradient(to right, #4b936a, #3bc07a);从上到下的渐变background-image: linear-gradient(#4b936a, #3bc07a);原创 2021-10-15 16:35:14 · 141 阅读 · 0 评论 -
字体引入和字间距调整
1、字体引入/*字体引入*/@font-face { font-family: 'num'; src: url("../../../../public/num.TTF");}// 使用时.fontFamily { font-family: 'num';}2、字间距调整letter-spacing: 6px;原创 2021-10-15 16:33:56 · 157 阅读 · 0 评论 -
设置placeholder的颜字体颜色样式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red;}input::-moz-placeholder { /* Firefox 19+ */ color: red;}input:-ms-input-placeholder { /* IE 10+ */ color: red;}input:-moz-placeholder { /* Firefox 18- */ color: red;}原创 2021-10-15 16:31:50 · 218 阅读 · 0 评论 -
纯css实图片现瀑布流布局
1、HTML部分<body> <h1>纯CSS3实现倾角瀑布流</h1> <div id="waterfall"> <span><img src="./imgs/1.jpg" ></span> <span><img src="./imgs/2.jpg" ></span> <span><img src="./imgs/原创 2021-10-15 16:29:54 · 99 阅读 · 0 评论 -
用position定位时,使文字自动换行
1、CSSword-break:break-all;2、定义和用法word-break 属性规定自动换行的处理方法。提示:通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。3、语法word-break: normal|break-all|keep-all;值描述normal使用浏览器默认的换行规则。break-all允许在单词内换行keep-all只能在半角空格或连字符处换行...原创 2021-10-14 18:08:52 · 509 阅读 · 0 评论 -
CSS超出省略
1、单文本查出省略width: 200px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、多行文本超出省略display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;3、适用范围因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;4、注-webkit-line原创 2021-10-14 18:06:34 · 2291 阅读 · 0 评论