CSS常用小技巧

禁止input框点击

<input type="text" readonly οnfοcus="this.blur();"> 

制作一个三角形 - 首先一个空的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;
}

css实现文本不换行、自动换行、强制换行、文本溢出省略

/不换行*/
white-space:nowrap;
/自动换行*/
word-wrap: break-word;
word-break: normal;
/*强制换行*/
word-break:break-all; 

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

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

渐变：文字渐变，按钮背景渐变

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

/*按钮背景色渐变*/
button{
	background:linear-gradient(90deg,rgba(44,67,241,1),rgba(146,24,223,1));
}

select、input、textarea，默认样式处理

/*select 下拉选择设置右对齐*/
select option {
        direction: rtl;
}
/*去除浏览器中 input button 等标签获得焦点时的带颜色边框*/
input, textarea{
        outline:none;
}
/*去除textarea的默认小三角*/
textarea{
	resize: none;
}