CSS常用技巧

自定义字体

定义：

@font-face {
    font-family: alibaba;
    src: url("../font/alibaba/Alibaba-PuHuiTi-Regular.ttf") ;
  }
@font-face {
    font-family: alibaba;
    src: url("../font/alibaba/Alibaba-PuHuiTi-Bold.ttf");
    font-weight: bold;
  }  

应用

font-family:alibaba;

---

定义css变量

需要:root来定义变量

:root{
    --shadow_color:rgba(75, 75, 75, 0.2); /*阴影颜色 */
}

应用时，用var()来使用变量

element{
color: var(--subtitle_color);
} 

---

CSS简单计算

使用calc()

width:calc(100% + 17px)

注意
1.只能计算简单计算：±*/
2.运算符前后必须是空格

---

边框设置

这是border的简写形式

border: 1px solid #cacaca;

其实border是由border-width;border-style;border-color三个属性来控制；

---

按钮四态css控制

css的伪类永远的神，快速设置按钮在不同反应下的样式。
按钮的四态：常态、悬浮态、按下态、选中态

.my_button{
    width: 50px;
    height: 25px;
    margin: 5px ;
    border: none;
    border-radius: 5px;
    background-color: var(--button_bg_normal);
}
.my_button:hover{
    background-color: var(--button_bg_hover);
    color: white;
}
.my_button[status="selected"] {
    background-color: var(--button_bg_focus);
    color: white;
}
.my_button:active{
    background-color: var(--button_bg_press);
}

注意:选中态需要配合js给元素附上属性status=“selected”;status属性是我自定义的。不用纠结属性命名，让js代码知道就好了。

$(".my_button").click(function (e) { 
    $(".my_button").attr("status","normal")//先把所有按钮状态属性变为normal
    $(this).attr("status", "selected");
});