实用的css

outline使用

• outline 常用
  • 去除input输入框的边框
  • 设置元素描边( 双重边框 )
  • 制作内部是圆角外部为直角元素
• outline-offset 设置描边距离元素的距离 可以设置为负数,会有意想不到效果

.out {
    width: 200px;
    height: 200px;
    border: 1px solid #f92400;
    background: #f92400;
    margin: 45px auto;
    outline: 12px solid #1bc2a8;
    outline-offset: -110px;
}

效果图: 中间的十字就是用outline制作的

image.png

    width: 200px;
    height: 200px;
    border: 1px solid #f92400;
    background: #f92400;
    padding: 1em;
    box-shadow: 0 0 0 0.6em #1bc2a8;    /* 用于内部与描边之间的颜色 */
    margin: 45px auto;
    outline: .8em solid #1bc2a8;
    outline-offset: 0;
    border-radius: 0.8em;

效果图:

image.png

calc()

• calc()
  • 可用于对css数值类属性值进行计算
  • 支持+,-,*,/基本运算
  • 允许calc函数中嵌套calc
  • calc() 中的运算符前后必须留一个空白,如: calc(100% - 80px),否则会产生解析错误.这样做的原因是为了做到向前兼容(据说是因为calc()以后会添加关键字其中就有-作为连接符使用)
    下例是一个 宽度比父级小100px 左边距为父级宽度减去80px的元素

    width: calc(100% - 100px);
    margin-left: calc(100% - calc(60px + 20px));
    height: 50px;
    background: #abdf55;

效果图: 小的矩形就是使用calc()的元素

image.png

text-overflow

• text-overflow 当文本超出包含元素时做出的处理
  • clip 截取文本 (这个其实和设置超出隐藏效果一样)
  • ellipsie 显示省略号来替代被截取的文本
  • 自定义 使用自己指定的字符串来替代被截取的文本 (实验没反应,可能写法不对吧)

这个属性还是很必要的,想当初不知道这个属性的时候自己每次都是使用js进行截取还得判断各种情况,唉(╥╯^╰╥)

html部分:

    
这是测试文本超出隐藏的,乱打的乱打的乱打的乱打的乱打的
          

css部分:
.text p {
    width:100px;
    overflow: hidden;   /* 这个属性不能少 */
    text-overflow:ellipsis;
    white-space: nowrap;
}

效果图:

截取