UnoCss常用样式写法
UnoCss常用样式写法。
·
- 以下罗列一些常用的UnoCss样式写法;
- 还有更多的样式可以去 Unocss官网 查询
// text-16px
font-size: 16px;
// text-#ffffff
color: #ffffff;
// font-700 或 font-bold
font-weight: 700;
// w-full 或 w-100%
width:100%;
// w-[calc(100%-48px)]
width: calc(100% - 48px);
// h-full 或 h-100%
heigth:100%;
// relative
position: relative;
// cursor-pointer
cursor: pointer;
// rd-30px
border-radius: 30px;
// border-b-1px
border-bottom-width: 1px;
// border-b-dashed
border-bottom-style: dashed;
// border-b-#E9E9E9
border-bottom-color: #E9E9E9;
// grid
display: grid;
// grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr));
// flex
display: flex;
// items-center
align-items: center;
// items-start
align-items: flex-start;
// flex-col
flex-direction: column;
// justify-center
justify-content: center;
// bg-[length:100%_100%]
background-size: 100% 100%;
// select-none
-webkit-user-select: none;
user-select: none;
// mt-20px
margin-top: 20px;
// mx-12px
margin-right: 12px;
margin-left: 12px;
// my-12px
margin-top: 12px;
margin-bottom: 12px;
// m-12px
margin-right: 12px;
margin-left: 12px;
margin-top: 12px;
margin-bottom: 12px;
//tracking-2px
letter-spacing: 2px;
// bg-[url(xxxx)]
background-image: url(xxxx);
// bg-center
background-position: center;
// bg-no-repeat
background-repeat: no-repeat;
// bg-#ffffff
background-color: rgb(255 255 255);
// from-#8166F6 to-#B4A5F7 bg-gradient-to-r
background: linear-gradient(to right, #8166F6 , #B4A5F7 );
更多推荐


所有评论(0)