注册 登录

清河洛

您现在的位置是:清河洛 > 网站前端 > css学习

css学习

  • tailwind中的弹性布局

    定义容器元素排列方向flex-row 左->右 flex-row-reverse 右->左 flex-col 上->下 flex-col-reverse 下->上元素换行flex-wrap 自动换行,向下方换行,第一行在上方 flex-wrap-reverse 自动换行,向上方换行,第一行在下方 flex-nowrap 不换行,所有元素宽度等比例缩小水平对齐justify-normal 不考虑对齐 justify-start start对齐 jus...

    2023-12-12
  • tailwind中的滤镜

    使用css中的filter属性添加各种滤镜使用filter-none可以删除全部滤镜模糊自定义: blur-[width] blur-none filter: blur(0) blur filter: blur(8px)亮度: brightness-[num]: num为一个表示亮度值的数字对比度: contrast-[num]: num为一个表示对比度的数字阴影自定义: drop-shadow-[x_y_[blur_]color] 分别表示水平偏移、垂直偏移、模糊值(可省略)、阴影颜色 预设了几个常用的值 drop-shadow-none drop-sha...

    2023-12-11
  • tailwind中交互及SVG

    强调色: accent-[color]/n ,复选框和单选组等元素选中时的颜色删除表单元素默认外观: appearance-none光标样式cursor-style,其中style可选值有 autodefaultnonecontext-menuhelp pointerprogresswaitcellcrosshair textvertical-textaliascopymove no-dropnot-allowede-resizen-resizene-resize nw-resizes-resizese-resizesw-resizew-resize ew-resizens...

    2023-12-11
  • tailwind中的转换和动画

    缩放scale-[num] scale-x-[num] scale-y-[num] num为一个可以为小数的数字 为1表示无缩放效果旋转rotate-[angle] angle为一个包含单位deg的角度值 rotate-[25deg]位移translate-x-[*] translate-y-[*]翻转skew-x-[angle] skew-y-[angle]转换中心自定义: origin-[x_y] x,y表示原点的坐标,可以为带单位的长度值,也可以是百分数 origin-[keyword] :设置转换时的相对中心,默认为元素的中心 ...

    2023-12-11
  • tailwind中的文本和列表

    字体名称: font-[family]字体大小: text-[size]字体平滑antialiased :灰度抗锯齿 subpixel-antialiased :子像素抗锯齿斜体: italic not-italic字体粗细:font-[weight] :weight为一个1-1000的数字 以下预设值从前到后依次加粗(由100增至900) font-thin font-extralight font-light font-normal font-medium font-semibold font-bold fon...

    2023-12-08


网址导航