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部分:
<div class="text">
<p>这是测试文本超出隐藏的,乱打的乱打的乱打的乱打的乱打的</p>
</div>
css部分:
.text p {
width:100px;
overflow: hidden; /* 这个属性不能少 */
text-overflow:ellipsis;
white-space: nowrap;
}
效果图:
截取
