2020-12-26

常用的css小妙招，建议新手收藏

一夜枫林 2020-12-24 17:01:43 52 收藏 3

分类专栏： 前端学习 笔记

最后发布:2020-12-24 17:01:43 首次发布:2020-12-24 17:01:43

版权

input修改光标颜色

<input type="number">
input{
  caret-color: rgba(0, 255, 0, 1.0);
}

      
        
        
        
        

      
        
        
        
        

         
         
         
         
1
         
         
         
         
2
         
         
         
         
3
         
         
         
         
4
        
        
        
        

div背景透明色

<div>背景颜色</div>
div{
   height: 100px;
   width: 100px;
   background: red;
   opacity: 0.5;  //值为:  0.1 -- 0.9
}

      
        
        
        
        

      
        
        
        
        

         
         
         
         
1
         
         
         
         
2
         
         
         
         
3
         
         
         
         
4
         
         
         
         
5
         
         
         
         
6
         
         
         
         
7
        
        
        
        

文字隐藏，只会隐藏内容，不会影响元素

<div>文字隐藏<div>
div{
   height: 100px;
   width: 100px;
   background: #ff6699;
   text-indent: -9999px;
}

      
        
        
        
        

      
        
        
        
        

         
         
         
         
1
         
         
         
         
2
         
         
         
         
3
         
         
         
         
4
         
         
         
         
5
         
         
         
         
6
         
         
         
         
7
        
        
        
        

让元素内容闪烁

<div class="div">闪烁</div>
.div{
  animation: div 3s linear infinite;
}
@keyframes div {
			0% {
				opacity: 1;
			}
			50% {
				opacity: 0.5;
			}
			100% {
				opacity: 0;
			}
		}

      
        
        
        
        

      
        
        
        
        

         
         
         
         
1
         
         
         
         
2
         
         
         
         
3
         
         
         
         
4
         
         
         
         
5
         
         
         
         
6
         
         
         
         
7
         
         
         
         
8
         
         
         
         
9
         
         
         
         
10
         
         
         
         
11
         
         
         
         
12
         
         
         
         
13
         
         
         
         
14
         
         
         
         
15
        
        
        
        

边框阴影

<div>边框阴影</div>
div{
  height: 100px;
  width: 100px;
  box-shadow:0 0 9px 3px #999;
}

      
        
        
        
        

      
        
        
        
        

         
         
         
         
1
         
         
         
         
2
         
         
         
         
3
         
         
         
         
4
         
         
         
         
5
         
         
         
         
6
        
        
        
        

文字阴影

<div class="div1">白色文本的阴影效果</div>
<div class="div2">霓虹灯效果的文本阴影</div>
.div1{
   color:#fff;
   text-shadow:2px 2px 4px #000;
}
.div2{
   color:#000;
   text-shadow:0 0 3px #f0f;
}

      
        
        
        
        

      
        
        
        
        

         
         
         
         
1
         
         
         
         
2
         
         
         
         
3
         
         
         
         
4
         
         
         
         
5
         
         
         
         
6
         
         
         
         
7
         
         
         
         
8
         
         
         
         
9
         
         
         
         
10
        
        
        
        

背景图片不铺满，自由控制

<div>背景图片不铺满，自由控制</div>
div{
  background-image: url(/static/images/login/upgrade.png);
  background-size: 100% 100%; 图片大小
  background-repeat: no-repeat;  //不铺满,只显示一张
  background-position: top right;  //如果你仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%
                       //x% y%       第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

文本超出隐藏

<div class="div1">文字显示一行，一行之后溢出隐藏 </div>
<div class="div2">多行文字， </div>
.div1 {
        border: 1px solid black;
        width: 40px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-bottom: 20px;
        }
.div2 {
       border: 1px solid black;
       width: 40px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
        }
//核心      overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;   

 
   
   
   
   

 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
    
    
    
    
5
    
    
    
    
6
    
    
    
    
7
    
    
    
    
8
    
    
    
    
9
    
    
    
    
10
    
    
    
    
11
    
    
    
    
12
    
    
    
    
13
    
    
    
    
14
    
    
    
    
15
    
    
    
    
16
    
    
    
    
17
    
    
    
    
18
    
    
    
    
19
    
    
    
    
20
    
    
    
    
21
   
   
   
   

清除不是数字js正则

let arr = '2.1.3ssa  阿松大'
console.log(arr.replace(/[^\d]/g, ""))

 
   
   
   
   

 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
   
   
   
   

非常全面的前端协作规范(长文建议先收藏)

Yvette Lau的专栏

12-16 475

原文作者：掘金 _sx_原文链接：https://juejin.im/post/5d3a7134f265da1b5d57f1ed万字长文，继续刷新我的文章长度记录，涉及前端开发的方方面面...

最热网友收藏

weixin_33728708的博客

06-29 214

 最热网友 收藏：共享一些面试题(2007年第1周)  2007年第1周最热网友 收藏

共享一些面试题(52)，共94人收藏，xblue3首先收藏
程序员真实写真:35岁前成功的12条黄金法则(49)，共182人收藏，yanglilibaobao首先收藏
css学习笔记,欢迎大家补充，谢谢(46)，共54人收藏，hotsunn首先收藏
我来做个好人吧，40种网站设计常用技巧…

  
		
 
  插入表情
  

    

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
  
  

			

				
			
			
			
			
			
			

				
					
添加代码片
					
				
				

					
HTML/XML
					
objective-c
					
Ruby
					
PHP
					
C
					
C++
					
JavaScript
					
Python
					
Java
					
CSS
					
SQL
					
其它
				
			
			

						还能输入1000个字符
						“速评一下”
						
			
		
	
	

• 

  爱码士学习永远不会晚:写的很好，关注了，记得互相关注、互相评价哦9小时前回复举报

  

• <
• 1
• >

微信小程序资源汇总

Vincentyun

08-20 4792

微信小程序汇总（10月16日更新小程序100+个教程或资讯与50+个Demo）

1：微信小程序官方工具：https://mp.weixin.qq.com/debug/w … tml?t=1476434678461
2：微信小程序简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599
3：微信小程序设计指南：http…

全国(大学)高等教育各学科视频教学全集

AlienTech for better life!~

11-10 5310

为了方便已就业的朋友再学学习，提供一篇覆盖的教程有计算机类全部，机械类，土木建筑类，财经管类 ，电气类，法学类 ，广告类，医学，心理学，大学英语，大学物理，高等数学，大学化学，哲学 应有尽有。常言道："书山有路勤为径，学海无涯苦作舟。"无止境地学习，是每一个智者所必需的。人要想不断地进步，就得活到老、学到老。这是我无意中看到的 收藏了，欢迎有兴趣的朋友学习。

 

企业级项目实战(带源码升

史上最全的HTML、 CSS知识点总结,浅显易懂。适合入门 新手,需要 收藏

10-31

2. 标签是没有语义的,它的作用就是为了设置单独的样式用的,把一段话圈起来,然后用 css设置样式。 2-5 q标签,短文本引用 比如在你...

这些 css技巧,你肯定不会全知道【 建议 收藏】_coder吹雪...

12-14

下面是总结的 css技巧, 建议大家 收藏,以后用的时候就不用到处查资料了。当然这些也不是所有的,大家如果有什么好的 css有趣样式技巧也可以发出来哦三角形最常见的一种...

彻底了解DVD:从入门到精通

临风的专栏

03-22 3万+

彻底了解DVD:从入门到精通-转自山楂树论坛白衣原创第一章　缘起　　　　那片直径120mm的小小的塑料片，闪耀着一种迷幻般的光泽。一束绚丽的激光照射在这小小的塑料圆片上，成千上万比特的数据流沿着一根细细的光纤从DVD影机输送到AV功率放大器，在那里，经过杜比逻辑解码器无声而神奇的工作，无边无际的光影弥漫开来，在客厅幽暗的灯光下，我们的灵魂仿佛在片刻间从世俗生活中抽离，进入一个由声画构成的幻想国度…

Oracle官方文档及个人书签地址

测试

10-10 5599

Oracle官方文档及个人书签地址

Oracle 资料下载地址：https://edelivery.oracle.com/&...

新手福音!最全面的易懂 CSS总结,一篇博文让你了解 CSS,动...

11-28

不要滑了,点进来吧。一篇博客让你了解 css CSS总结一. CSS的基本概念 二.文字处理 三.盒子模型与背景 四.列表样式和链接样式 五.定位和显示效果 6.浮点数

值得 收藏的多个 CSS 实用小技巧(附代码片段)_Lunaqi的博客

12-5

值得 收藏的多个 CSS 实用小技巧(附代码片段) 作为前端,日常开发充满了各种挑战与乐趣,我们穷尽一切在奇葩的需求中提升用户体验。本文将列举一些前端开发中碰到的小众...

seo相关文章

luofengdong的专栏

03-01 2万+

SEO 网址：http://blog.myspace.cn/xmmei/category/41652.aspx


五个等级SEOer的特征分析
 顶尖的SEOer：

他们几乎不写博客、不回帖、不参与互联网的争论，每天专心耕耘自己的网站，赚钱很低调，生活很滋润。新浪的SEO不知道哪位负责的，我一直想认识一 下，感觉他是顶尖的。另外听说有某SEOer搞英文站做外贸，公司每月营业额好几百万但只有30几个员工，前台小姐的工资都在

技术目录

qq_16497617的博客

11-06 1450

原创 学会了这些技术，你离BAT大厂不远了

                                                               ...