CSS常用小技巧总结。

407 阅读2分钟

1、 禁止input框点击 
<input type="text" disabled="disabled"> 
	
2、制作一个三角形 -  首先一个空的div元素
<div class="triangle"></div>	
.triangle{
	border-style: solid;
	border-color:  red transparent transparent transparent ;
	border-width:100px   100px  0 100px;
	width: 0px;
	height: 0px;
}
	
3、css实现文本不换行、自动换行、强制换行
//不换行
white-space:nowrap;
//自动换行
word-wrap: break-word;
word-break: normal;
//强制换行
word-break:break-all; 
        
4、 获得焦点的表单元素,当一个表单元素获得焦点时,可以将其突出显示:
input:focus { border: 2px solid green; }

5、设置图像透明度,两种方式
opcity:0.6;
background:rgba(0,0,0,.6);

6、实现背景图片全屏自适应宽高
html,body{
	width:100%;
	height:100%
}
body{
	background: url(images.jpg)no-repeat;
	background-size: 100% 100%;
}

7、文字渐变效果
.text{
        background-image: linear-gradient(135deg, deeppink, deepskyblue);
        -webkit-background-clip: text;
        color: transparent;
}

8、select 下拉选择设置右对齐
select option {
        direction: rtl;
}

9、实现文字竖向排版,最简单的方法是设置较小的宽度,然后高度自适应。
p{
        width: 25px;
        line-height: 18px;
        height: auto;
        font-size: 12px;
        padding: 8px 5px;
}

10、单行文本溢出显示省略号
p{
        overflow: hidden;   //超出隐藏
        width: 200px;
        text-overflow: ellipsis;   //当文本内容溢出时显示省略号
        white-space: nowrap;   //文本在同一行上不会换行,直到遇到 <br> 标签为止
}

11、多行文本溢出显示省略号
.box{
        width: 100%;
        overflow: hidden;
        display: -webkit-box;   //将对象作为弹性伸缩盒子模型显示
        -webkit-box-orient: vertical;   //设置伸缩盒对象的子元素的排列方式
        -webkit-line-clamp: 3;   //用来限制在一个块元素中显示的文本的行数
        word-break: break-all;   //让浏览器实现在任意位置的换行  *break-all为允许在单词内换行*
}

12、设置表单file控件上传文件时可以选择多个文件
<input type='file' multiple='true'>   //设置multiple属性值为true

13、实现文字一行水平居中,多行左对齐效果
<p class='text'><span>文本不换行时,居中</span></p>
<p class='text'><span>文本内容过多,造成换行时,统一左对齐</span></p>
.text{
        text-align: center;
}
.text span{
        display: inline-block;
        text-align: left;
}

14、文本空白会被保留
white-space: pre;

15、修改input输入框中光标的颜色不改变字体的颜色
input{
        color:  #fff;
        caret-color: red;
}

16、去除浏览器中 input button 等标签获得焦点时的带颜色边框
input, textarea, button{
        outline:none;
}