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");
});本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
