文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端课程——盒子模型

下外边距(margin-bottom)控制控制块级元素的下一个兄弟元素的位置 右外边距(margin-right)控制内联元素或行内会计元素的下一个兄弟元素的位置. margin-left 正值:向右移动...负值:向左移动 margin-top 正值:向下移动 负值:向下移动 margin-bottom 正值:下一个兄弟元素向下移动 负值:下一个兄弟元素向上移动 margin-right 正值:下一个兄弟元素向右移动...盒子模型的类型 块级元素 可以设置宽高 内联元素 水平方向的内边距有效的 - 控制文本内容在水平方向的位置 垂直方向的内边距有效的 - 文本内容的位置没有变化，内边距向上和向下进行扩展 垂直方向的外边距无效的...- 上外边距和下外边距 水平方向的外边距有效的 行内块级元素 与块级元素相同 盒子模型的类型 box- sizing属性用于设置盒子模型的类型，该属性的值具有两个: ●content-box:...解决方案: 简单的解决方案有两种: 为上一个元素设置下外边距为300px 为下一个元素设置上外边距为300px 网上的方法 可以在两个元素中间再添加一个新的元素.但不推荐.因为 为了解决间题增加无用的元素和内容

1.1K10

做不好阴影和模糊？UI设计师看这一篇就够了

诸如Sketch之类的某些工具也具有“ spread”值，使阴影看起来像是较小的元素正在投射阴影（静电注：如上图左侧所示，阴影面积比较小）。 任何阴影中，最重要的部分是X，Y偏移和模糊。...下面的示例，这个元素包含三个阴影，每个阴影向下移3个点。 ? Neumorphism（新拟物风-同态） 在这种新拟物风格中，阴影和负X和Y值的堆叠，是使Neumorphism工作所需的核心原理。 ?...内阴影（Inner Shadow） 内阴影在UI中相对较少。它具有与阴影相同的参数，但它出现在对象内部。 内阴影之所以用的不多，是因为它们看起来像堆叠在一起的两个层。...在这种情况下，可以追加外部阴影，因为它可以提供深度。这样可以看起来更加自然。如果单纯使用内阴影，会让元素看起来就像一个凹进去的洞。 ? 左侧的示例使用了经典的图层叠加。...反过来，这导致了Neumorphism的最大可访问性缺陷之一。 ? 02.模糊（Blur） 如今，大多数设计工具都具有高斯类型的模糊效果，可以在各个方向上均匀地扩展效果。它的主要值是半径。

2.8K21
您找到你想要的搜索结果了吗？
是的
没有找到

CSS布局(二) 盒子模型属性

、absolute、inline-block元素)   2、只发生在垂直方向上(不考虑writing-mode) 【分类】   margin重叠的情况 1、相邻的兄弟元素 p{... 兄弟二  2、父级元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递 .box{ background-color: pink...这样，使页面结构更具有健壮性，最后一个元素移除或位置调换，都不会破坏原生的布局 2.auto   只有width/height和margin可以设置auto。...所以在IE下虚线显得比较密   关于点线dotted，在chrome下，点线是方点；而在IE/firefox下，点线是圆点 border-style:none(默认) border-style:hidden...  2、边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上   3、内阴影对元素没有任何效果   4、最先写的阴影在最顶层   5、该属性与border-radius

1.9K70

第93天：CSS3 中边框详解

CSS3 边框详解 其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。.../”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ） 二、边框阴影...box-shadow  与 text/shadow 用法差不多 1、水平偏移量 正值向右 负值向左； 2、垂直偏移量 正值向下 负值向上； box-shadow: 5px 5px 27px red,...-5px -5px 27px green; 3、模糊度是不能为负值； 4、inset可以设置内阴影； 设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。...可以设置多重边框阴影，实现更好的效果，增强立体感。

85140

CSS基础知识点整理笔记

定义后代选择器 div > p 定义子元素选择器 p + li 相邻兄弟选择器，两者有相同元素，选择的是前一个选择器相邻的后一个选择器 讲一下css3的弹性布局 答案解析： 弹性布局是css3的新属性...，是一种当页面需要去适应不同类型和屏幕大小时确保元素能够具有恰当行为的布局。...可以用来解决子元素浮动，父元素的高度没有了、两栏布局右栏不自适应、垂直方向上两元素边距有误等情况。...这一方面解决了大文件不便维护的问题，另一方面也解决了一堆文件在加载时的性能问题 例如在css使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让我们的css更加简洁、适应性更强，代码直观...box-shadow属性详解 box-shadow：offset-x offset-y blur spread color position //从左到右表示：x轴偏移量、y轴偏移量、阴影的模糊半径

1.4K20

寒假提升 ｜ Day6 CSS 第四部分

写出案例，证明CSS属性的继承性 当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素下的所有子元素(p,span,div...margin一般是用来设置兄弟元素之间的间距 padding一般是用来设置父子元素之间的间距 上下margin的折叠 垂直方向上相邻的2个 margin( margin-top 、 margin-bottom...只设置其中一个元素的margin 上下margin折叠的情况 块级元素的居中 在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block) 行内级元素(包括 inline-block...>:blur-radius, 模糊半径 第4个:spread-radius, 延伸半径 :阴影的颜色，如果没有设置，就跟随color属性的颜色 inset:外框阴影变成内框阴影...文字阴影 - text-shadow text-shadow用法类似于 box-shadow ，用于给文字添加阴影效果 的常见格式如下(没有向内) 我们可以通过一个网站测试文字的阴影:

1.3K20

css学习笔记，持续记录。

兄弟选择器：E~F{sRules}，选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级，“~” 左右空格无影响。 6....第一个同级兄弟元素 :last-of-type CSS3最后一个同级兄弟元素 :only-of-type CSS3唯一的一个同级兄弟元素 :nth-of-type() CSS3第n个同级兄弟元素 :nth-last-of-type...：设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。取值参见。 ：设置阴影模糊值。值越大，模糊面积越大，阴影就越大越淡。...默认为0，此时阴影边缘锐利。对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。...BFC是一个块级元素，块级元素在垂直方向上依次排列。 BFC是一个独立的容器，内部元素不会影响容器外部的元素。 属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。

2.6K60

01-移动端开发教程-CSS3新特性（上）

学习阶段不需要去做这些重复工作，只需要用第三方的工具自动化处理就行。后面都会学习： 比如：开发工具前缀插件、gulp自动化处理、webpack自动化处理。...3.2.1 以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类 重点理解通过E来确定元素的父元素。...语法规则 说明 E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素； E:nth-last-child...可以为负值 ②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 ③：如果提供了第3个长度值则用来设置对象的阴影模糊值。...设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。 可以设置多重边框阴影，实现更好的效果，增强立体感。

1.5K01

01-移动端开发教程-CSS3新特性

学习阶段不需要去做这些重复工作，只需要用第三方的工具自动化处理就行。后面都会学习： 比如：开发工具前缀插件、gulp自动化处理、webpack自动化处理。...3.2.1 以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类 重点理解通过E来确定元素的父元素。...语法规则 说明 E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素； E:nth-last-child...可以为负值 ②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 ③：如果提供了第3个长度值则用来设置对象的阴影模糊值。...该值为空时，则对象的阴影类型为外阴影 默认值：none 说明： 设置或检索对象阴影。可以设定多组效果，每组参数值以逗号分隔。设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。

2.6K70

css基础教程之边框背景

正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧 ②：第 2 个长度值定义元素的阴影垂直偏移值。...正值，阴影出现在元素底部；负值，则阴影出现在元素顶部 ③：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。...不允许负值 ④：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩 ：定义元素阴影的颜色。...如果该值未定义，阴影颜色将默认取当前最近的文本颜色 inset：定义元素的阴影类型为内阴影。...contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

90620

CSS3总结

10% 10% 10%|10 10 10 10) (stretch | repeat | round) 3.阴影 text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)， 水平偏移量... 垂直偏移量 阴影模糊值 颜色(rgba)， 水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba); box-shadow:水平偏移量 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba)， 水平偏移量... 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba)， 水平偏移量 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba); 三、背景、蒙版 1.背景 background-clip:border-box...属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、 justify、 or center。...start 所有盒子在父盒子的左侧，余下的空间在右侧； end所有盒子在父盒子的右侧，余下的空间在左侧； justify 余下的空间在盒子间平均分配； center 可利用的空间在父盒子的两侧平均分配。

49620

box-shadow 高阶玩法：纯 CSS 画蒙娜丽莎和星空

想必写过 CSS 的同学都用过 box-shadow，它可以给元素设置阴影，增加立体效果。...这样就可以用来做一些有意思的事情了： 比如把 width、height 设置为 0，然后设置多个阴影： width、height 为 0，模糊半径为 0，扩散半径为 5px，那整个阴影就是一个 10px...: 1px; box-shadow: multiple-box-shadow(700); } 这里就没有设置扩散半径和模糊半径了，所以阴影块大小就是元素的宽高。...其实这种还是比较经典的 CSS 问题，比如轮播图的无缝滚动也是同种原因。 解决方式就是在后面再接一个一模一样的，然后位移到了 -2000px 的时候，马上定位到 0 重新开始。这样就无缝了。...阴影块的大小是由元素宽高、扩散半径、模糊半径这些决定的。 通过多重阴影顺序排列阴影块可以达到像素块的效果，画出蒙娜丽莎或者其他任意的图片。

883100

CSS3选择器 | 每个前端开发者必须要掌握的技术

E[att] {} : 选择具有att属性的E元素 E[att="val"]{}: 选择具有att属性且属性值等于val的E元素 E[att~="val"]{}:用于选取属性值中包含指定词汇的元素 E[...选择奇偶行 nth-child(odd)与nth-child(even): 不足之处： nth-child选择器在计算子元素时，第奇数个元素还是偶数个元素时，是连同父元素内的所有 子元素一起计算的...后边相邻的选择器会被选中，第一个li不会被选中 通用兄弟选择器： li ~ li:li后面的所有li元素被选中 子选择器： ul> li:ul后面直接的li元素被选中 9.渐进增强、优雅降级 渐进增强（...CSS3属性 a)文本阴影： 例： text-shadow:5px 5px 5px #f66; 指定多个阴影：(参数形式为X坐标 Y坐标 阴影的模糊程度 阴影颜色) text-shadow：10px 10px...（对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的） c)word-wrap： 让长单词与URL地址自动换行 normal：只在允许的断字点换行（浏览器保持默认处理） break-word

69610

CSS魔法堂：Box-Shadow没那么简单啦:)

blur radius，默认值为0，阴影模糊度半径。 spread distance，默认值为0，扩展或缩小阴影的作用面积。 ，阴影颜色，默认与color属性一致。...实现原理： 创建一个与元素border box尺寸一致的阴影盒子; 将阴影盒子定位到于元素border box重合，并位于元素之下; 根据horizontal offset和vertical offset...实现原理(纯个人理解)： 创建一个与元素padding box尺寸一致的阴影盒子; 将阴影盒子定位到于元素padding box重合，并位于元素之上; 水平和垂直各画两条线，分别跟元素padding edge...，可以看到阴影尺寸与元素尺寸一模一样。...阴影不仅默认尺寸与元素盒子一致，默认形状也一致。也就是元素盒子采用圆角时，阴影的默认形状也是圆角的。既然说是默认形状一致，就是说可以不一致咯！那到底如何不一致呢，下面我们一起来看个究竟吧！

1.2K100

web前端必备英语词汇都在这儿了，客官你了解多少？

在中国从事程序开发工作的人，似乎英语并不会影响到你找到满意的工作，升职与加薪。但程序毕竟是歪果人创造的，都是由英文和数字表达式所构成的，所以掌握开发过程中常用的英语词汇还是非常重要的。...前段时间无意中发现了之前整理的web前端英语词汇，希望对从事前端的你有所帮助，不会让英语成为你工作当中的软肋！...最小的 medium 中间 model 模型 menu 菜单 move 移动 middle 中间 N: nextElementSibling 返回下一个兄弟元素 nextSibling 返回下一个兄弟节点...二次方的缓动 quintic 五次方的缓动 quartic 四次方的缓动 querySelector 根据标签名获取第一个元素 querySelectorAll 获取所有标签名的元素 R: repeat...scrollLeft 元素左边界 setAttribute 设置节点上的属性 submit 提交 scroll 滚动 shadow 阴影 silver 银色 special

2.9K20

【分享干货】做网页设计的常用css代码大全

轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y轴的位置...3.Blru：建立模糊效果 Blur(Add=?, Direction=?, Strength=?) Add：是否单方向模糊，此参数是一个布尔值，true（非0）或false（0）。...Direction：设置模糊的方向，其中0度代表垂直向上，然后每45度为一个单位。 Strength：代表模糊的象素值。 4.Chroma：把指定的颜色设置为透明 Chroma(Color=?)...Color：指定阴影的颜色。OffX：指定阴影相对于元素在水平方向偏移量，整数。 OffY：指定阴影相对于元素在垂直方向偏移量，整数。...Positive：是一个布尔值，值为true（非0）时，表示为建立外阴影；为false(0)，表示为建立内阴影。

3.8K10

从微信聊天框开始学习CSS属性filter

，参数可以设置为CSS长度(px、em等，不接受百分比) 图片 使用技巧 filter属性的blur()可以将模糊应用于元素。...filter: blur(4px); 图片 但是结果和我们想象的不太一样，只有阴影有模糊。...这是因为filter是将模糊等图形效果应用于元素，而后面的背景图片是该元素后面的body元素的，所以添加的模糊并不会添加到后面的背景图片中。...这时候，就轮到filter的好兄弟backdrop-filter登场了，它可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。值和filter的一样用法。...(和box-shadow很相似，不过，在部分浏览器中通过filter可以提供硬件加速) offset-x：设置阴影的水平偏移量 offset-y：设置阴影的垂直偏移量 blur-radius：设置阴影的模糊半径

83420

如何在 CSS 中设计出漂亮的阴影？

个人认为，最好的网站和Web应用程序对它们具有切实的”真实”质量。实现这种质量涉及很多因素，阴影是一个很关键的因素。...如果我们有策略地使用阴影，我们可以创造深度的错觉，就好像页面上的不同元素在不同级别上浮动在背景之上一样。 下面是一个示例。...如果我们的目标是创造深度的错觉，我们需要每一个阴影来匹配。否则，它看起来就像一堆模糊的边框： 在自然界中，阴影是从光源投射而来的。...drop-shadow使用的是 SVG高斯模糊，这是一种与盒子阴影使用的模糊算法不同的模糊算法。 两者之间还有其他一些重要的区别，但现在我想专注于drop-shadow的超能力：它勾勒出元素的形状。...例如，如果我们在具有透明和不透明像素的图像上使用它，阴影将仅适用于不透明像素： 这适用于图像，但也适用于HTML元素！

29710
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券