添加微信
15116211880

做网站常用CSS样式

访问: 时间:2020-3-17 14:01:29 来源:本站

强制不换行,超出显示省略号  white-space:nowrap;text-overflow:ellipsis; overflow:hidden;


限制显示多少行  overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical;


选择器  :nth-of-type(1);


奇数和偶数 p 元素指定两种不同的背景色  p:nth-child(odd) {background:#ff0000;}  p:nth-child(even){background:#0000ff;}


下标是 3 的倍数的所有 p 元素的背景色  p:nth-child(3n+0){background:#ff0000;};


投影  box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.1);


圆角  border-radius:5px 5px 0 0;


两端对齐  text-align-last:justify; text-align:justify; text-justify:distribute-all-lines; // 这行必加,兼容ie浏览器


首航缩进  text-indent: 2em;


从上到下的线性渐变  background-image: linear-gradient(#e66465, #9198e5);


从左到右的线性渐变  background-image: linear-gradient(to right, red , yellow);


从左上角到右下角的线性渐变  background-image: linear-gradient(to bottom right, red, yellow);


带有指定的角度的线性渐变  background-image: linear-gradient(-90deg, red, yellow);


中心渐变  background-image:radial-gradient(#94c860, #63b06e);


calc() 函数计算  calc(100% - 100px);


根元素<html>中定义了一个基本字体大小为62.5%(也就是10px,设置这个值主要方便计算:1.2rem即 12px ,1.6rem即16px 。 如果没有设置,将是以浏览器默认的“16px”为基准 )。

上一篇:互联网思维中的商业颠覆与重构 下一篇:降低网站跳出率的有效方法
0
打印此页】  【关闭