Unocss特殊用法

主要记录一些unocss的一些特殊用法

border

html
 体验AI代码助手
 代码解读
复制代码
<!-- 写法一 -->
<div border="1px solid #000"></div>
<!-- 写法二(需要写三个，无法缩写) -->
<div class="border-#000 border-1px border-solid"></div>

在VSCode中UnoCss插件的预览

linear-gradient添加角度

html
 体验AI代码助手
 代码解读
复制代码
<!-- bg-gradient-xxx 前一定要加上!（感叹号，等同!important） -->
<!-- bg-gradient-to-t 可以随便写一个方向（可以to-t,也可以to-b或to-l等） -->
<div
    class="
      w100px h100px
      !bg-gradient-[45deg,#333,#333_50%,#eee_75%,#333_75%]
      bg-gradient-to-t
    "
  >
</div>
<!-- 新写法 -->
<div class="bg-[linear-gradient(315deg,#436BFD,#2aa7ff)]"></div>

预览

浏览器预览

last-child

js
 体验AI代码助手
 代码解读
复制代码
// div最后一个元素隐藏
<div class="[&:last-child]:hidden" v-for="item in 10" :key="item">
    <span class="childName">/</span>
</div>

// div最后一个元素的子元素(.childName)隐藏
<div class="[&:last-child_.childName]:hidden" v-for="item in 10" :key="item">
    <span class="childName">/</span>
</div>

预览

div最后一个元素隐藏

div最后一个元素的子元素隐藏

box-shadow 设置阴影

js
 体验AI代码助手
 代码解读
复制代码
<div class="shadow-[5px_5px_25px_0px_#000]">
</div>

预览

group 组命名

html
 体验AI代码助手
 代码解读
复制代码
<!-- 悬浮父元素，子元素变化 -->
 <div class="group">
   <span class="group-hover:color-red"></span>
 </div>

预览

~欢迎大家前来这里纠正和补充！