侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

基本

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 111 阅读 / 1,056 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / CSS / 基本

属性
圆角
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) 或者带着单位存。


0

评论区