总是记不住但又总是要用的css

有没有经常遇到一些样式每次写都要用百度呢？我收集了一些我平时经常要用到的但又总是记不住的样式。有错误的地方欢迎指正。转载请注明出处。

一、设置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;

}

设置input聚焦时的样式

input:focus {

  background-color: red;

}

取消input的边框

input{

  border: none;

  outline: none;

}

二、隐藏滚动条或更改滚动条样式

/*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;

}

三、文字超出隐藏并显示省略号

单行（一定要有宽度）

width:200rpx;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

多行

word-break: break-all;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

四、控制div内的元素自动换行

纯英文或者数字的时候

  .box {

    word-wrap: break-word;

    word-break: break-all;

  }

word-wrap: break-word; 比较温柔，会先另起一行，新的行放不到再把单词断了。样式如下：

See the Pen word-wrap: break-word; by 小东西儿
(@xiaodongxier) on CodePen.

word-break: break-all; 这娃比较暴力，他不会去新起一行，而是直接在后面跟着，如果放不下，则会强制把单词折断。样式如下：

See the Pen word-break: break-all; by 小东西儿
(@xiaodongxier) on CodePen.

五、纯css画三角形

#demo {

    width: 0;

    height: 0;

    border-width: 20px;

    border-style: solid;

    border-color: transparent transparent red transparent;

}

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

#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;

}

八、div 元素模拟输入框可编辑

contenteditable 属性

<style>

  .box {

    border: 1px solid red;

    background: blue;

    color:#fff;

  }

</style>

<p class="box" contenteditable="true">这是一个可编辑段落。</p>

效果预览：

.contenteditable { border: 1px solid rgba(255, 0, 0, 1); background: rgba(0, 0, 255, 1); color: rgba(255, 255, 255, 1) !important }

这是一个可编辑段落。

巴特西

总是记不住但又总是要用的css

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

设置input聚焦时的样式

取消input的边框

二、隐藏滚动条或更改滚动条样式

三、文字超出隐藏并显示省略号

单行（一定要有宽度）

多行

四、控制div内的元素自动换行

五、纯css画三角形

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

七、表格边框合并

八、div 元素模拟输入框可编辑

最新文章

热门文章

巴特西

总是记不住但又总是要用的css

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

设置input聚焦时的样式

取消input的边框

二、隐藏滚动条或更改滚动条样式

三、文字超出隐藏并显示省略号

单行（一定要有宽度）

多行

四、控制div内的元素自动换行

五、 纯css画三角形

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

七、表格边框合并

八、div 元素模拟输入框可编辑

最新文章

热门文章

五、纯css画三角形

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