属性
•
圆角
•
border-radius:5px; //参数是半径
•
border-radius:5px/10px //一个是横向半径一个是竖向半径,可以设置成椭圆
•
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
•
为边框应用图片
•
会根据路径后面跟的四个参数从上开始顺时针轮牌,划四条线把图片划成九份,中间一份不用,剩下八分当成边框图片.
•
透明颜色
•
background-color:rgba(100,120,60,0.5)
•
注意是透明度而不是变白度
•
渐变色
•
background: linear-gradient(degree,color1,color2,[color3,color4...])
•
background: radial-gradient(degree,color1,color2,[color3,color4...])
•
background: radial-gradient(at 20px 20px,red,green,blue);
第一条是线性渐变,第二条是径向渐变,degree的单位为deg,表示时钟指针为这些度是指针指向的角度,多个浏览器兼容有问题,用的时候baidu一下...
•
文字
•
text-overflow:clip or ellipsis;
表示文字超出边界后用什么取代,clip为减掉什么都不显示,ellipsis为省略号.
•
white-space:nowrap
不换行
•
overflow:hidden;
溢出隐藏
•
要实现多余一行的内容用省略号显示就要同时写上面的三行.
•
word-wrap:normal | break-word
是否截断单词
•
字体
•
加载服务端的字体文件
@font-face{
font-family:名称;
src:路径;
}
设置万之后就可以在别的地方用font-family引用了
变量
声明
在选择器里，--name：值。
前面加上-- 表示这是一个变量
不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文
取值
var（名字），只能放在字段值上，不能放在字段名上。
var(--width):25px； 是不行的
计算
不能直接计算，用calc（）函数，在函数里计算。只能乘除，不能加减？
空格尾随特性
存数字的话读出来后会面会加上空格，后面再跟单位的话会导致这条属性失效
•
解决 > calc( *1px) 或者带着单位存。
评论区