Iwen's blog Iwen's blog
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • Linux
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
复盘
关于

Iwen

不摸鱼的哥哥
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • Linux
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
复盘
关于
  • Vue

  • Vue进阶

  • CSS

    • CSS 世界
      • 文本溢出
      • 画三角形
      • 表单
    • BFC 浮动
    • 盒子模型
    • 页面布局
    • 选择器
    • Flex布局
    • CSS 揭秘
  • ES6

  • Base

  • Core

  • Array

  • Object

  • String

  • Async

  • Browser

  • Http

  • 性能优化

  • 正则

  • 经典总结

  • 设计模式

  • 数据结构

  • 算法

  • 手写

  • TypeScript

  • 复盘
  • CSS
Mr.w
2020-11-29

CSS 世界

# CSS 世界

# 文本溢出

<style>   
/* 单行文本 */
.box{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 多行文本 */
.box{
    word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 3;    /* 指定行数*/
	-webkit-box-orient: vertical;
	overflow: hidden;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 画三角形

.box {
    content: '';
    position: absolute;
    border: 10px solid transparent;
    border-bottom-color: pink;
}
1
2
3
4
5
6

# 表单

/* 所有表单的placeholder 默认颜色 */
/* IE9及以下版本不支持input的placeholder属性,需要用JS来做兼容。 */
input::-webkit-input-placeholder{
    color:red;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:red;
}  
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:red;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-1*/
    color:red;
}

/* 去除激活input的默认边框, 三种方法都能实现 */
input{
    outline: none;
    outline: medium;
    outline: 0;
} 

/* textarea禁止拖动 */
textarea{
    resize: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
vue-router传参方式
BFC 浮动

← vue-router传参方式 BFC 浮动→

最近更新
01
flex布局页面自适应滚动条问题
12-28
02
前后端分离开发请求接口跨域如何携带cookie的问题
12-28
03
怎么实现div长宽比固定width-height4比3
12-28
更多文章>
Theme by Vdoing | Copyright © 2017-2022 Iwen | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式