Sass学习（四）--高级语法

border-#{$i}{ border:#{$i}px solid red } } //编译后 .border-1 { border: 1px solid red; } .border border: 5px solid red; } border-4 { border: 4px solid red; } border-3 { border: 3px solid red; } border border-#{$num}{ border:#{$num}px solid red } } //编译后 border-1 { border: 1px solid red; } border

【Django | 开发】面试招聘信息网站（美化admin站点&添加查看简历详情链接）

class="text-3xl font-semibold py-7 px-5">Resume in detail <label class="relative block p-3 <em>border</em> " placeholder="{{ resume.username }}"></textarea> </label> <label class="relative block p-3 <em>border</em> "{{ resume.applicant }}"></textarea> </label> </label> <label class="relative block p-3 <em>border</em> resume.born_address }}"></textarea> </label> </label> <label class="relative block p-3 <em>border</em> resume.master_school }}"></textarea> </label> </label> <label class="relative block p-3 <em>border</em>

css3之border-radius学习

margin: 10px;         float: left;       }       .border-1{         border-radius: 10px;       }       .border -- 圆形 -->       

ECharts 实现一个水滴效果的数据可视化图表

grid-cols-4 gap-3"> <button class="color-btn w-10 h-10 rounded-full bg-blue-500 <em>border</em> "></button> <button class="color-btn w-10 h-10 rounded-full bg-green-500 <em>border</em> ></button> <button class="color-btn w-10 h-10 rounded-full bg-purple-500 border A855F7"></button> <button class="color-btn w-10 h-10 rounded-full bg-red-500 <em>border</em>

恋爱时间倒计时网页设计与实现方案

button" data-bg-type="gradient" class="bg-gradient-to-br from-love-pink to-love-purple h-10 rounded-lg border <button type="button" data-bg-type="particle" class="bg-gray-100 h-10 rounded-lg <em>border</em> <button type="button" data-theme="pink" class="w-full h-10 bg-love-pink rounded-lg <em>border</em> <button type="button" data-theme="purple" class="w-full h-10 bg-love-purple rounded-lg <em>border</em> <button type="button" data-theme="gold" class="w-full h-10 bg-love-gold rounded-lg <em>border</em>

Tailwind CSS那些事儿

-- 具有一长串Tailwind类的可重用按钮： --> <button class="bg-yellow-700 <em>border-2</em> font-semibold border border-gray tailwind components; @tailwind utilities; .foo { color: red; } 被转换为： .border { border-width: 1px; } .<em>border</em> 不要编写类似border border-dotted <em>border-2</em> border-black border-opacity-50的长类列表，可以设置border-dotted <em>border-2</em> border-black /50，也可以达到相同的效果：<em>border-2</em>表示已设置border，而border-black/50表示 RGBA 格式的简写。

用tailwindcss适配暗黑模式竟如此简单

text-gray-700 dark:text-gray-300 dark:bg-gray-900 w-full h-full"> <button @click="lightMode" class="<em>border</em> -2 p-1 m-1">普通模式</button> <button @click="darkMode" class="<em>border-2</em> p-1 m-1">暗黑模式</button> <div

鸿蒙应用开发，比 React 体验更好

hover:blue-500 dark:blue-500 dark:hover:blue-600 text-sm text-white font-mono font-light py-2 px-4 border hover:blue-500 dark:blue-500 dark:hover:blue-600 text-sm text-white font-mono font-light py-2 px-4 border

SASS用法介绍

/sass/style.scss */ .border-2 { border: 2px solid blue; } /* line 149, .. /sass/style.scss */ .border-2 { border: 2px solid blue; } /* line 156, ..

小而美的 css 的原子化

涉及到背景，字体，边距，边框的设置，类就很多 <button className="bg-blue-400 text-sm text-white font-mono font-light py-2 px-4 <em>border</em> const myButtonClass = "bg-blue-400 text-sm text-white font-mono font-light py-2 px-4 border-2 border-rounded

如何使用 Tailwind CSS 设计高级自定义动画

Web 组件入门指南

我还可以在 App.jsx 文件中使用 Tailwind CSS 框架在 playcode.io 中绘制一个圆： <div class="w-20 h-20 rounded-full <em>border-2</em>

前端的同学，终于要起飞啦，Github 6.3k star + ，免费可商用的UI元素库！！！

return ( <button className="relative inline-flex h-12 w-40 items-center justify-center rounded-full <em>border</em>

如何理性看待Tailwind和styled-components争宠React

TestComponent = () => ( <div className="text-base mg-1 pt-1 pr-1 md:pt-2 md:pr-2 rounded border-solid <em>border</em>

《Nuxt.js 实战：从放弃到入门》一、项目初始，图片尺寸缩放

-- 图片上传区域 --> <div class="<em>border-2</em> border-dashed border-gray-300 rounded-lg p-8 mb-6 text-center

【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓

2"> <div class="w-8 h-8 rounded-full <em>border-2</em> border-white bg-primary-light

Gemini 3 打造一个中国象棋 Web 版：从 UI 到 AlphaBeta

items-center cursor-pointer z-10"> {isSel && <div className="absolute w-full h-full <em>border</em> <div className={`relative w-[90%] h-[90%] rounded-full flex items-center justify-center shadow-md <em>border</em>

【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

2"> <div class="w-8 h-8 rounded-full <em>border-2</em> border-white bg-primary-light

React.memo() 和 useMemo() 的用法与区别

return (     <div className="flex flex-col justify-center items-center <em>border-2</em> rounded-md mt-5 dark:

Tailwind CSS （可能）是名过其实的

Tailwind 允许我们在单个 CSS 文件中使用它们的类名： .header { @apply bg-red-200 w-4 text-gray-400 rounded-sm border-red-400 border