1.css3中background简写属性

在开发中背景属性 background 还是很常用的， background 有很多属性，如:
background-color 背景颜色
background-image 背景图像
background-position 背景图像的位置
background-size 背景图片的尺寸
background-repeat 重复背景图像
background-origin 定位区域
background-clip 绘制区域
background-attachment 是否固定或者跟随页面滚动。（ scroll ：默认值，随页面滚动；fixed 固定，不滚动；inherit继承。）
当然这些属性可以分开写，也可以连写（简写），规则（顺序）如下：

  1. background：color img_url repeat attachment position / size

颜色 图片地址 重复 是否固定 位置 / 尺寸

  • 示例：
  1. background：#F00 url('img/images.png') no-repeat fixed center / cover

红色背景，不重复，固定背景，居中，短边填充。
图像位置和尺寸用 / 隔开，前面是 background-position ，后面是 background-size 。
其中 background-position 的写法注意：语义描述时是 top left ，数值描述时是 x-pos y-pos ，两种顺序相反。 background-size 的写法是：width height 。
这样分开写会更好理解一些：

  • 示例：

    1. background：#F00 url('img/images.png') no-repeat fixed top left / 100% auto

  • 书写规则

    1. background: [background-color] 
    2.           [background-image] 
    3.           [background-repeat] 
    4.           [background-attachment]
    5.           [background-position] / [ background-size] [background-origin] [background-clip];

    需要注意的是里面的/，它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size。
    除此之外，你也可以增加另外两个描述它的属性值： background-origin和 background-cli

  • 示例

  1. .example {
  2.   background: aquamarine   //背景颜色
  3.               url(img.png) // 图片路径
  4.               no-repeat    // 是否重复平铺
  5.               scroll       
  6.               center center / 50% 
  7.               content-box content-box;
  8. }

2. 单行文字超出出现省略号

  1. .ellipsis-line {
  2.     border: 1px solid #f70505;
  3.     padding: 8px;
  4.     width: 400px;
  5.     overflow: hidden;
  6.     text-overflow: ellipsis; //文本溢出显示省略号
  7.     white-space: nowrap; //文本不会换行
  8. }

3.文字超出自动换行

  1. .text{
  2.   text-align: justify;
  3.     text-justify: newspaper;
  4.     word-break: break-all;
  5. }

4. 多行文字超出出现省略号

仅限在webkit内核浏览器中使用

  1. .multi-line {
  2.     border: 1px solid #f70505;
  3.     width: 400px;
  4.     overflow: hidden;
  5.     text-overflow: ellipsis;
  6.     display: -webkit-box;
  7.     -webkit-line-clamp: 3;//自定义行数
  8.     -webkit-box-orient: vertical;
  9. }

5.flex布局的属性

6.grid布局的属性

7.checkbox美化

8.滚动条美化

9.两个文字和四个文字对齐

  1.  .text2 {
  2.    letter-spacing: 2em;
  3.    margin-right: -2em;
  4. }

image.png

10.hover显示曲线

image.png

  1. .test {
  2.         text-decoration: none;
  3. }
  4. .test:hover {
  5.   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
  6.   background-size: 20px auto;
  7.   animation: waveMove 1s infinite linear;
  8. }
  9. @keyframes waveMove {
  10.   from {
  11.     background-position: 0 100%;
  12.   }
  14.   to {
  15.     background-position: -20px 100%;
  16.   }
  17. }

11.inset属性

  1. .box{
  3.      inset:0px 
  4. }

12. 覆盖但不影响操作

  1. pointer-events: none