2018-09-03 CSS常用小技巧

1、 禁止input框点击

2、制作一个三角形 - 首先一个空的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; //文本在同一行上不会换行，直到遇到
标签为止
}

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控件上传文件时可以选择多个文件
//设置multiple属性值为true

13、实现文字一行水平居中，多行左对齐效果

文本不换行时，居中

文本内容过多，造成换行时，统一左对齐

.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;
}
更多前端方面知识请访问:www.sunluyi.cn