那些你经常用但又记不住的css / 2020-09-10

一、设置input 的placeholder的字体样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  color: red;
}
input:-ms-input-placeholder { /* IE 10+ */color: red;
}
input:-moz-placeholder { /* Firefox 18- */color: red;
}

1.2设置input聚焦时的样式

input:focus {   background-color: red;
}

1.3取消input的边框

border: none;
outline: none;

二.文字超出隐藏并显示省略号

2.1单行（一定要有宽度）

width:200rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2.2多行

word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

三.控制div内的元素自动换行

word-wrap: break-word;
word-break：break-all;

四.隐藏滚动条或更改滚动条样式

/*css主要部分的样式*//*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {width: 10px; /*对垂直流动条有效*/height: 10px; /*对水平流动条有效*/
}/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: rosybrown;border-radius: 3px;
}/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{ border-radius: 7px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #E8E8E8;
}/*定义两端按钮的样式*/
::-webkit-scrollbar-button {background-color:cyan;
}/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {background:khaki;
}

五.绝对定位元素居中（水平和垂直方向）

#demo {width: 200px;height: 200px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: green;
}

六.表格边框合并

table,tr,td{border: 1px solid #333;}
table{border-collapse: collapse;
}

七.纯css画三角形

#demo {width: 0;height: 0;border-width: 20px;border-style: solid;border-color: transparent transparent red transparent;
}

那些你经常用但又记不住的css / 2020-09-10相关推荐

记第一次topcoderSRM赛(2011,09,10)Jie.Qin'birthday
为什吗会写这么一篇文章那,因为昨天晚上我们四个人第一次参加TopcoderSRM赛,结果不用想自然是很杯具的,首先,我们是业余级别的,而且还是菜鸟级的我们,,更加称不上是Topcoder,我们也是刚刚 ...
geany怎么创建文件夹_SAP事务码太多，记不住怎么办？
不同于国产财务软件,SAP提供了直接输入命令的便捷功能,例如在命令框中输入F-02可以直接进入到财务记账界面,使用起来非常方便. 但是对于很多SAP初学者来说,SAP有太多的事务代码了,真的好难记住呀 ...
sap事务代码_SAP事务码太多，记不住怎么办？
不同于国产财务软件,SAP提供了直接输入命令的便捷功能,例如在命令框中输入F-02可以直接进入到财务记账界面,使用起来非常方便. 但是对于很多SAP初学者来说,SAP有太多的事务代码了,真的好难记住呀 ...
阅读文献的三大问题：坐不住，记不住，想不开
From: http://blog.sciencenet.cn/home.php?mod=space&uid=2068&do=blog&id=500206 阅读文献的三大问题: ...
一直记不住window下面的盘符切换
一直记不住window下面的盘符切换: 比如说: cd C:\Apache24 ..这样是错误的. 比如说: 输入cd d:,跳转一下就又跳了回来. 然后百度了一下,发现是切换的方式错了,直接输入d: ...
java编程东西好多记不住_课程总结
学习java感想这一学期的java学习过去了,Java是一门面向对象编程语言,向对象编程是Java最核心的思想,这也是区分和C等其他编程语言的一个显著特征.个人感觉java比数据结构要容易理解些,但 ...
看完源码记不住，是我记性太差了吗？
都说大厂面试必问源码,尤其是现在最流行的Java 开发技术--Spring的源码.可很多人看完Spring源码记不住,是记性太差了吗? 当然不是!是因为你没有掌握学习源码的技巧. 看完源码的我- 前段 ...
css 滚动条样式_那些你总是记不住但又总是要用的css
有没有经常遇到一些样式每次写都要用百度呢?我收集了一些我平时经常要用到的但又总是记不住的样式.有错误的地方欢迎指正.转载请注明出处. 一.设置input 的placeholder的字体样式 input ...
学php记不住函数,为什么都是记不住PHP 的函数名
为什么都是记不住PHP 的函数名回复讨论(解决方案) 用多了就记住了虽然 php 的函数很多,但常用的也就几十个恩.刚开始是这样.用多了自然就能记住了. 翁曰:我亦无他,唯手熟尔恩,干程序员久 ...

那些你经常用但又记不住的css / 2020-09-10

一、设置input 的placeholder的字体样式

1.2设置input聚焦时的样式

1.3取消input的边框

二.文字超出隐藏并显示省略号

2.1单行（一定要有宽度）

2.2多行

三.控制div内的元素自动换行

四.隐藏滚动条或更改滚动条样式

五.绝对定位元素居中（水平和垂直方向）

六.表格边框合并

七.纯css画三角形

那些你经常用但又记不住的css / 2020-09-10相关推荐

最新文章

热门文章