1. 文字阴影

  1. .shadow_font{
  2.   color: #fff;
  3.   /*此处阴影用了红色的看上去比较明显，颜色可以根据需要修改，包括阴影的像素值*/
  4.   text-shadow: #f00 3px 3px 3px;
  5.   /*白字黑边*/
  6.   text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
  7. }


2. 溢出换行

  1. /*单行文字*/
  2. *{
  3.   overflow: hidden;
  4.     text-overflow: ellipsis;
  5.     white-space: nowrap;
  6. }
  7. /*多行*/
  8. *{
  9.   overflow : hidden;
  10.   display: -webkit-box;
  11.   -webkit-line-clamp:3;
  12.   -webkit-box-orient: vertical;
  13. }
  • word-break 属性规定自动换行的处理方法。

word-break: normal|break-all|keep-all;

值 描述
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
  • overflow 属性规定当内容溢出元素框时发生的事情。

overflow: visible|hidden|scroll|auto|inherit;

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值
  • white-space 属性设置如何处理元素内的空白。

white-space: normal|pre;

值 描述
normal 默认。空白会被浏览器忽略
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

3. CSS设置背景图宽度100%，高度自适应

原理是通过padding-top或者padding-bottom实现，值是背景图片的宽高比。高度设置为0。

  1. .newcenter{
  2.   width: 100%;
  3.   height: 0px;
  4.   background: url('../../assets/img/newcenter.png') no-repeat;
  5.   background-size: 100% auto;
  6.   /*padding-top: 50%;*/
  7.   padding: 25% 0; /* 宽:高=2:1 */
  8. }

4.