[jQuery] 实用CSS

.bgStyle {      position: relative;  }  .bgStyle::before {    content: '';    position: absolute;    bottom: -0.125em;    width: 100%;    height: 0.25em;    background: linear-gradient(to top left, transparent, transparent 45%, red, transparent 55%, transparent 100%),   linear-gradient(to top right, transparent, transparent 45%, red, transparent 55%, transparent 100%);     background-size: 0.5em 0.5em;    background-repeat: repeat-x;  }

.scrollBox {  margin: 0 60rpx;  width: 630rpx;  display: flex;  white-space: nowrap;}/* 子元素还需要设置display:inline-block;*/

• 背景渐变
  

{background-image:linear-gradient(left, red 100px, yellow 200px);}

• 边框图片
  

border-image: url(border.png) 30 30 round

• 
  
  
  
  • 
    
  
  
• font-face属性：定义自己的字体
  
• 对长的不可分割的文字进行分行
  
  
  
  • 
    
  
  

word-wrap：break-word;

• 文字阴影
  

text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

box-shadow: 10px 10px 5px #888888

@media screen and (max-width: 300px) {  body {    background-color:lightblue;  }}

• 
  
  
  
  • 
    
  
  
• 内部的盒子会在垂直方向，一个个的放置；
  
• 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠
  
• 计算BFC的高度时，浮动元素也参与计算
  
  
  
  • 
    
  
  

• 
  
  
  
  • 
    
  
  
• 父级div定义height
  
• 最后一个浮动元素后加空div标签 并添加样式clear:both。
  
• 包含浮动元素的父标签添加样式overflow为hidden或auto。
  
• 父级div定义zoom
  
  
  
  •