css开发手册，css速查手册
大家好，今天小编来为大家解答css开发手册这个问题，css速查手册很多人还不知道，现在让我们一起来看看吧！
TailwindCss速查手册
TailwindCss速查手册
Tailwind CSS是一个功能强大的实用程序优先的 CSS框架，它提供了大量的类名来快速构建和设计用户界面。以下是一些常用的 Tailwind CSS缩写及其对应意义的速查手册：
一、布局
w：设置元素的宽度（width）。max-w：设置元素的最大宽度（max-width）。h：设置元素的高度（height）。max-h：设置元素的最大高度（max-height）。m：设置元素的外边距（margin）。mt：设置元素的上外边距（margin-top）。
mb：设置元素的下外边距（margin-bottom）。
ml：设置元素的左外边距（margin-left）。
mr：设置元素的右外边距（margin-right）。
p：设置元素的内边距（padding）。pt：设置元素的上内边距（padding-top）。
pb：设置元素的下内边距（padding-bottom）。
pl：设置元素的左内边距（padding-left）。
pr：设置元素的右内边距（padding-right）。
二、文本样式
font：设置字体家族（font-family）。text：设置文本颜色、文本对齐方式、文本转换和字体大小。leading：设置行高（line-height）。tracking：设置字母间距（letter-spacing）。uppercase：将文本转换为大写（text-transform: uppercase）。lowercase：将文本转换为小写（text-transform: lowercase）。三、背景和边框
bg：设置背景颜色（background-color）。border：设置边框样式、边框宽度和边框颜色。rounded：设置边框圆角（border-radius）。shadow：设置盒子阴影（box-shadow）。四、弹性盒子布局
flex：将元素设置为弹性盒子容器（display: flex）。justify：设置弹性盒子内项目的对齐方式（justify-content）。items：设置弹性盒子内项目的对齐方式（align-items）。self：设置弹性盒子内单个项目的对齐方式（align-self）。order：设置弹性盒子内项目的排列顺序（order）。flex-grow：设置弹性盒子内项目的放大比例（flex-grow）。flex-shrink：设置弹性盒子内项目的缩小比例（flex-shrink）。五、网格布局
grid-cols：设置网格列的模板（grid-template-columns）。grid-rows：设置网格行的模板（grid-template-rows）。gap：设置网格项之间的间距（grid-gap）。六、响应式设计
sm, md, lg, xl：分别对应移动设备、平板、桌面和大屏幕设备的断点。hover：设置鼠标悬停时的样式。focus：设置元素获取焦点时的样式。七、其他常用缩写
边框和分隔符
divide：设置分隔符（border-color, border-style, border-width）。
divide-x：设置水平分隔符。
divide-y：设置垂直分隔符。
border-collapse：设置边框是否合并。
Flexbox尺寸和排列
flex-wrap：设置弹性盒子是否换行。
flex-row, flex-row-reverse, flex-col, flex-col-reverse：设置弹性盒子的方向。
flex-1...flex-12：设置 flex-grow、flex-shrink和 flex-basis属性。
gap-x：设置水平包裹在对象之间的间距。
gap-y：设置垂直包裹在对象之间的间距。
space-x：设置水平排列中对象之间的空间。
space-y：设置垂直排列中对象之间的空间。
Z-index
z-{n}：设置 z-index的值，其中 n为正整数。
动画
animate-{name}：向元素添加动画（使用@keyframes中定义的动画名称）。
列表样式
list-style-{type}：设置列表项的类型（如 disc, decimal, decimal-leading-zero）。
转换和过渡
transform：让元素旋转、缩放、倾斜、平移等。
transition-{property}：用于添加一个过渡效果，{property}是必需的。
八、颜色和字体
颜色
text-{color}：设置文本颜色。
bg-{color}：设置背景颜色。
border-{color}：设置边框颜色。
fill-{color}：设置 SVG填充颜色。
stroke-{color}：设置 SVG描边颜色。
字体权重
font-thin：字体细。
font-light：字体轻。
font-normal：字体正常。
font-medium：字体中等。
font-semibold：字体半粗。
font-bold：字体粗。
font-extrabold：字体特粗。
font-black：字体黑。
九、显示和隐藏
hidden：隐藏元素（display: none）。invisible：隐藏元素，但仍保留该元素的布局和尺寸。visible：显示元素。十、清除浮动
clear-{direction}：清除某个方向的浮动效果。十一、容器
container：将内容限制在最大宽度的容器内部。mx-auto：实现水平居中（margin-left和 margin-right设置为 auto）。通过掌握这些常用的 Tailwind CSS缩写及其对应意义，你可以更快速地开发出具有良好用户体验的 Web应用程序。
css3 文字阴影
建议楼主多看看CSS手册。
语法：
text-shadow：none|<shadow>[,<shadow>]*
<shadow>=<length>{2,3}&&<color>?
默认值：none
适用于：所有元素
继承性：有
取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色。
<!DOCTYPEhtml>
<htmllang="zh-cn">
<head>
<metacharset="utf-8"/>
<title>text-shadow_CSS参考手册_web前端开发参考手册系列</title>
<style>
.testli{margin-top:10px;}
.test.mormalp{text-shadow:1px1pxrgba(0,0,0,.3);}
.test.blurp{text-shadow:1px1px1pxrgba(0,0,0,.3);}
.test.groupp{text-shadow:1px1px0rgba(255,255,255,1),1px1px2pxrgba(0,85,0,.8);}
</style>
</head>
<body>
<ulclass="test">
<liclass="mormal">
<strong>普通文字阴影</strong>
<p>测试普通文字阴影效果</p>
</li>
<liclass="blur">
<strong>模糊文字阴影效果</strong>
<p>测试模糊文字阴影效果</p>
</li>
<liclass="group">
<strong>多重模糊文字阴影效果</strong>
<p>测试多重模糊文字阴影效果</p>
</li>
</ul>
</body>
</html>
OK，本文到此结束，希望对大家有所帮助。