2018-09-03|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;
}
【2018-09-03|2018-09-03 CSS常用小技巧】16、去除浏览器中 input button 等标签获得焦点时的带颜色边框
input, textarea, button{
outline:none;
}
更多前端方面知识请访问:www.sunluyi.cn
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 数组常用方法一
- 2018-09-03(李克富视角点评训练营81/90)|2018-09-03(李克富视角点评训练营81/90) 那只蛙从“井”爬出来又进入了“隧道”
- 常用git命令总结
- java|java 常用知识点链接
- 3.css浮动
- c#常用网址记录
- 5|5 个 PPT 常用快捷键带你从此走向高效
- Python|Win10下 Python开发环境搭建(PyCharm + Anaconda) && 环境变量配置 && 常用工具安装配置
- iOS常用第三方库