随笔分类 - HTML和CSS
摘要：flex-grow属性是弹性盒布局模块的子属性。 它定义了弹性项目在必要时增长的能力。 它接受作为比例的无单位值。 它决定了项目应在伸缩容器内部占用多少可用空间。 例如，如果所有项目的flex-grow设置为1，则每个子项在容器内的大小都将设置为相等。 如果给其中一个子项赋值为2，则该子项将占用其他
阅读全文
摘要：作者：Tim Vam Damme 让我们来看看一种超轻量级的方法，它可以为一组任意大小的照片创建水平砖砌效果。将任何照片丢到上面，它们将边对边无缝对齐。 该解决方案不仅轻巧，而且非常简单。我们将使用无序的图片列表和仅仅17行CSS代码，其中重点要领是flexbox和object-fit。 #为什么?
阅读全文
摘要：通过CSS3的动画知识来完成一个旋转的太极。 任务 1、创建一个div，用CSS控制其大小、边框、位置等，做成一个静态的圆形，一半为红色一半为白色。 2、用div的伪元素位置两个圆环并放置核实位置，使其成为一个太极图案。 3、创建动画。 4、定义动画的重复属性，让其循环播放。 参考代码：
阅读全文
摘要：CSS中的animation属性可用于为许多其他CSS属性设置动画，例如颜色，背景色，高度或宽度。 每个动画都需要使用@keyframes这种at-rule语句定义，然后使用animation属性来调用它，如下所示： 每个@keyframes的 at-rule CSS语句规则都定义了在动画过程中的特
阅读全文
摘要：术语x-height是指给定字体中，任何给定尺寸下小写字母x的高度。 它提供了一种描述任意字体一般比例的方法。 在印刷中，x-height是一行文字的基线与小写字母(即不包括上升笔画或下降笔画)的主体顶部之间的距离。x-height更精准的定义是基准线(baseline)与字体中小写字母的中线(me
阅读全文
摘要：基本声明和用法 为了简洁起见，此页面上的其余代码将不使用任何前缀，但实际使用情况应使用上面的所有供应商前缀。 多个步骤 如果动画具有相同的开始和结束属性，则一种方法是用逗号分隔0%和100%值： 或者，你总是可以告诉动画运行两次(或任何偶数次)并告诉方向交替。 调用具有单独属性的关键帧动画： 动画简
阅读全文
摘要：border-image是一种简写属性，可让您使用图像或CSS渐变作为元素的边框。 当border-collapse设置为collapse时，border-image属性可以应用于任何元素，但内部表格元素(例如tr，th，td)除外。 属性 border-image唯一必需属性的简写是border-
阅读全文
摘要：语法： box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]; 用于在块级元素(如div)上投射阴影。 参数说明： 1、阴影的水平偏移量，正数表示阴影在框的右侧，负偏移量将阴影放在框的左侧。 2、阴影的垂直偏移，负数表示阴影在框的
阅读全文
摘要：border-radius编程练习1-3 我们刚学了圆角的知识，那么我们运用圆角的知识来实现下图所要求的效果： 参考代码：
阅读全文
摘要：你可以通过CSS应用一个border-radius给任何元素“圆角”。你只会注意到是否涉及颜色变化。例如，如果元素的背景颜色或者边框与元素覆盖的不同。(注：即元素的背景颜色或边框颜色与其父元素的颜色存在差异，下面例子中元素的背景颜色和边框呈现浅绿色，而其父元素原色为白色，便于明显观察到圆角)。举个简
阅读全文
摘要：设置最终形状参数： 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码： radial-gradient(circle closest-side at center, red 50%, blue 100%,white 100%) 径向渐变(radial gradients)：从起点到终点颜色从
阅读全文
摘要：线性渐变(linear gradients)沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变。 语法： background:linear-gradient(direction,color-stop1,color-stop2,……); 1、线性渐变从上到下(默认) 语法 background:li
阅读全文
摘要：1、单选题 将背景的绘制区域规定到内容框，应使用background-clip属性中的哪个属性值? A content-box B border-box C padding-box D none-box 2、多选题 在没有内填充(padding)的情况下，将背景的绘制区域从包含边框到不包含边框，如效
阅读全文
摘要：CSS中background-image属性应用图形(例如PNG,SVG,JPG,GIF,WEBP)或者渐变到元素背景上。 你可以在CSS中包含两种不同样式的图片：常规图片和渐变。 图像 在背景上使用图像是相当简单： url()值允许你提供任何图片的文件路径，并且作为该元素的背景展示。 你可以为ur
阅读全文
摘要：在CSS中background-color属性将纯色应用为元素背景。下面是一个例子： 上面使用的示例(#82a43a)称为16进制代码，它是CSS表示单一颜色的几种方式之一。有多种方法可以发现正确的16进制代码。任何使用过设计工具的人都会看到一个与此类似的颜色选择器： 请注意中下部分的16进制代码。
阅读全文
摘要：background-clip允许你控制背景图片或颜色延伸到一个元素的内间距(padding)或内容(content)之外的距离。 值 border-box是默认值。它允许背景一直延伸到元素边框(border)的外边缘。 padding-box 在元素内间距(padding)的外边缘处剪切背景，并且
阅读全文
摘要：CSS中background-size属性是background属性中最有用同时也是最复杂的属性。你可以用该属性使用很多变种和不同语法，所有这些都有不同的用例。下面是一个基本的例子： 这是background-size双值语法的一个示例。你可以使用该属性四种不同的语法：关键字语法、单值语法、双值语法
阅读全文
摘要：在CSS中background-attachment属性指定相对视口如何移动背景。 有三个值：scroll、fixed和local。解释它们区别最好的方式就是通过演示(尝试滚动单个背景)： 当谈及background-attachment时需要考虑两种不同的观点：主视图(浏览器窗口)和局域视图(你可
阅读全文
摘要：在CSS中background-position属性允许您在其容器内移动背景图片(或渐变)。 它有三种不同类型的值： 长度值(例如 100px 5px) 百分比(例如 100% 5%) 关键字(例如 top right) 默认值是0 0。它会将背景图片置于容器左上角。 长度值非常简单：第一个值是水平
阅读全文
摘要：calc() 函数支持任意CSS长度单位的混合计算，遵循标准数学运算优先级规则，可以动态计算长度值。注意，calc()函数内部的运算符两侧各加一个空白符，否则会产生解析错误。 calc()使用的难点在于百分比，理解了百分比定位，使用calc()就非常便捷。譬如以background-position
阅读全文
浙公网安备 33010602011771号