将矩形元素变为圆形(正圆，椭圆) 3、border-radius:5px 10px 15px 20px; 左上角倒角半径...：5px 右上角倒角半径：10px 右下角倒角半径：15px 左下角倒角半径：20px...，内边距 和 外边距的 一种方式 有框模型的属性介入到元素中的时候，元素实际占地面积就会发生改变 元素实际占地宽度=左右外边距+左右边框+左右内边距 + width;...背景图片固定 属性： background-attachment 取值： 1、scroll 默认值，背景图会随着滚动条而滚动...2、fixed 固定,背景图不会随着滚动条的滚动而改变位置 6、背景图片定位/位置 作用：改变背景图像在元素中的默认位置
拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。...important; } android系统中元素被点击时产生边框 部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。...body { overflow-y: hidden; } .wrapper { overflow-y: auto; } js 篇 移动端click屏幕产生200-300 ms的延迟响应 移动设备上的...video 在 ios 和 andriod 中自动播放 这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS...如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 true，则元素将在其所在滚动区的可视区域中居中对齐。 false，则元素将与其所在滚动区的可视区域最近的边缘对齐。
下面的截图显示了我们即将创建的侧边栏：侧边栏要创建上面的侧边栏，我们将在CSS中进行以下更改：将导航栏的显示更改为flex，并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接的字体大小和字体粗细为侧边栏设置固定宽度增加...在本节中，我们将专注于防止侧边栏在滚动主要内容时移动。我们希望将侧边栏样式设置为固定位置，以便主体可以自行滚动而不带上侧边栏。...可滚动的侧边栏隐藏扩展内容并显示侧边栏的代码片段如下所示： nav{ /* 先前的样式在这里 */ overflow-y: scroll; }关于overflow-y...样式化水平滚动条（flexbox滚动）样式化水平滚动条与样式化垂直滚动条类似，只是一个属性不同。高度属性用于设置水平滚动条的厚度，而不是宽度属性。...一次性样式所有滚动条。在大多数情况下，您可能希望在整个网站的所有垂直和水平滚动条上保持一致的样式。
盒子模型-重要组成部分 内容区域-width & height 内边距-padding（出现在内容和盒子边缘之间） 边框线-border 外边距-margin（出现在盒子外面） 盒子模型-边框线...属性名 boder(bd) 属性值 边框线粗细 线条样式 颜色（不区分顺序） 常用线条样式 关键字 含义 solid 实线 dashed 虚线 dotted 点线 设置单方向边框线 属性名 border...（无论是否溢出，都显示滚动条位置） auto 溢出滚动（溢出才显示滚动条） 外边距问题-合并现象 场景 垂直排列的兄弟元素，上下margin会合并 现象 取两个margin中的较大值生效 外边距问题...，无法改变元素垂直位置 解决方法 给行内元素添加line-height可以改变垂直位置 盒子模型-圆角 作用 设置元素的外边框为圆角 属性名 border-radius 属性值 数字+px/百分比（取值最大为...盒子模型-阴影 作用 给元素设置阴影效果 属性名 box-shadow 属性值 X轴偏移量 Y轴偏移量 模糊半径 扩展半径 颜色 内外阴影 注意： X轴偏移量和Y轴偏移量必须书写 默认是外阴影，内阴影需要添加
视差滚动====视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...scroll背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置 transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。...scss">.transform_container { perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y
flash地址” width=”宽度” height=”高度”> 贴影视文件： 固定帖子背景不随滚动条滚动...贴网页： 忽略右键：和overflow-y: hidden”> 取消横条滚动条： 取消滚动条（横条和竖条）： 设定打开页面大小： 电子邮件处理提交表单： <form...} alert(checkNum("121312312312")); alert(checkNum("190900m2312")) 改变光标形状
-webkit-appearance: none; appearance: none; } android系统中元素被点击时产生边框 描述：部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩...body { overflow-y: hidden; } .wrapper { overflow-y: auto; } MDN定义： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.... auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...g, '/') 进行字符串匹配转换 IOS键盘弹起挡住原来的视图 描述：ios就是当唤起键盘后，整个页面会被键盘压缩，也就是说页面的高度变小，并且所有的 fixed 全部变为了 absolute ,而
:red"> scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。...； Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定； Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定； Scrollbar-3Dlight-Color...为滚动条上边和左边的边沿颜色设定； Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。...Scrollbar-Track-Color为滚动条底板颜色设定； Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。...，只在某个div内使用滚动条 先说说正常显示的，显示滚动条和不显示滚动条，效果图如下： 代码： iframe 中始终显示滚动条： <iframe src
视差滚动 视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...scroll 背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。 对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。...transform_container { perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y
我们需要用 flex-wrap: wrap 来改变这一行为。 下面是一个典型的例子。 .options-list { display: flex; } 当空间较少时，会出现水平滚动。...固定高度 我经常看到主内容部分有固定的高度，而内容却大于这个高度，这就导致了布局的破坏。....element { overflow-y: auto; } 使用overflow-y: auto，滚动条只有在内容较长时才可见。否则，它就不显示。...布局移动发生的原因是为滚动条保留了一个空间。 Scrollbar Gutter 是内边框边缘和外填充边缘之间的空间。 对于经典滚动条，Scrollbar Gutter 的大小与滚动条的宽度相同。...而auto-fill将保留可用的空间，而不改变网格项的宽度。 也就是说，使用auto-fit可能会导致网格项目太宽，特别是当它们小于预期时。考虑一下下面的例子。
IE6下body设置background颜色边框和边距后的表现 还有一点可以证明我上面的推论，就是一旦设置了节点的background背景色之后，的背景色将失效。...3.关于滚动条 打开一个空白页面，观察浏览器右侧，会发现IE浏览器会有一段滚动条的槽道，而Firefox浏览器下没有。 ?...空白页面下IE和Firefox火狐浏览器左侧的滚动条与否 Firefox下没有滚动条，有时候会产生体验上的一些问题，比如：假设一个页面高度有限，无滚动条，当鼠标移到一个元素上，要显示一个浮动层，但是这个浮动层有一定的高度...很多人会想到设置 body{overflow-y:scroll;} Firefox下是出现了滚动槽了，但是IE下出现了两个滚动条，如下： ?...所以呢，只要在css中些写上： html{overflow-y:scroll;} 就可以让IE和Firefox（包括chrome）浏览器默认产生滚动条的滚动槽了。
边框左上角圆角半径 border-top-right-radius 边框右上角圆角半径 border-bottom-right-radius 边框右下角圆角半径 border-bottom-left-radius...边框左下角圆角半径 border-radius 复合属性 参数（all；上下左右；上下、左右；上、左右、下） 边框阴影 box-shadow: h-shadow v-shadow blur spread...，提供滚动机制 -auto 如果溢出，则赢提供滚动机制 -no-display 如果内容不适合内容框，则删除整个内容 -no-content 如果内容不适合内容框，则隐藏整个内容 列表属性 list-style-type...s-resize 向下改变大小 e-resize 向右改变大小 w-resize 向左改变大小 ne-resize 向上右改变大小 nw-resize 向上左改变大小 se-resize...向下右改变大小 sw-resize 向下左改变大小 CSS3页面布局 概述 盒子和DIV 盒子：content（内容）+padding（边框）+border（填充）+margin（间隔） width/
padding: 用于控制内容与边框之间的距离； Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容，显示文本和图像。...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...注意：clear属性只会对自身起作用，而不会影响其他元素。...scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
使用旧的语法，我们可以编写选择器，而不必将它们附加到元素上，它们将应用于所有可滚动的元素。...滚动条track 的左右两边都有边框，背景色为纯色。 滚动条thumb是圆形的，左右两边都有空间。 对于Windows，它有点不同。 下面是我们根据上面的模拟图来定制滚动条。...在新的语法中，我们不能调整滚动条的宽度，唯一能做的的是改变 track 和thumb的背景颜色。...例3 我们还可以为 thumb 和track添加边框，这可以帮助我们处理一些棘手的设计。....section { overflow-y: auto; } 可访问性问题 在定制滚动条设计时，请记住在 thumb 和 track之间要有良好的对比，这样它就容易被用户注意。
bottom, left top; （4）background-repeat: no-repeat、 repeat; （5）background-attachment:fixed //固定背景的位置，不随滚动条滚动...，始终是距离左边或者上边的距离 } img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } 3、边框有关...scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。...scaleY(n) 定义 2D 缩放转换，改变元素的高度。...这个属性允许你改变3D元素是怎样查看透视图 定义的perspective属性它是应用在元素的子元素而不是元素本身 perspective-origin 属性 观察者的位置，观察者可移动的区域就是被观察的物体未变换前的区域范围
每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。...当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。...它是 overflow-x 和overflow-y的 简写属性 。...可以在父元素的css属性中增加 overflow: hidden这一属性后 父元素不再随子元素而改变 或者在父元素之前加上一个空元素: .div-outer::before { content: "...元素的位置在屏幕滚动时不会改变。
它是 overflow-x 和overflow-y的 简写属性 。 /* 默认值。...: inherit; 官方描述： overlay 行为与 auto 相同，但滚动条绘制在内容之上而不是占用空间。...仅在基于 WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。...外部容器的滚动条 这里的外部容器指的是html， 直接加在最外层: html { overflow-y: scroll; } 手动加上这个特性， 不论什么时候都有滚动宽度占据空间。...内部容器做兼容 .wrapper { overflow-y: scroll; // fallback overflow-y: overlay; } 总结 个人推荐还是用 overlay
autohidemode:false }); }) 配置参数 当调用“niceScroll”你可以传递一些参数来定制视觉方面： cursorcolor - 十六进制改变光标颜色...，默认值是“＃000000” cursoropacitymin - 改变不透明度非常光标处于非活动状态（scrollabar“隐藏”状态），范围从1到0， 默认为0（隐藏） cursoropacitymax...- 改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0，默 认值是1（完全不透明） cursorwidth - 像素光标的宽度，默认值为5（你可以写“加入5px”太...） cursorborder - 游标边框css定义，默认为“1px的固体＃FFF” cursorborderradius - 以像素为光标边界半径，默认为“递四方” zIndex的 - 改变...，真=默认/“光标”=只进游标隐藏/ false =不隐藏背景，CSS改变轨道的背景下，默认为“” iframeautoresize，在加载事件AUTORESIZE的iframe（默认：true）
text-transform； 文本不换行：white-space； 文本溢出裁切：text-overflow； 文本下划线：text-decoration； 文本阴影：text-shadow； 颜色：color； 边框属性...边框：border 上下左右边框：border-top/right/bottom/left； 圆角边框：border-radius； 阴影：box-shadow； 尺寸属性 固定宽度：width；...最大宽度：max-width； 固定高度：height； 最小高度：min-height； 最大高度：max-height； 溢出方式：overflow； 横向溢出：overflow-x； 纵向溢出：overflow-y...； 背景属性 背景：background； 背景颜色：background-color； 背景图像：background-image； 铺排填充：background-repeat； 滚动固定：background-attachment...定位方式：position； 层叠顺序：z-index 其他属性 列表样式：list-style； 表格：table； 鼠标手势：cursor; 不透明度：opacity; 轮廓：outline; 滚动条
点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧...在线演示 使用transform描绘1px边框 要点：分辨率比较低的屏幕下显示1px的边框会显得模糊，通过::before或::after和transform模拟细腻的1px边框 场景：容器1px边框...在线演示 Color Skill 使用color改变边框颜色 要点：border没有定义border-color时，设置color后，border-color会被定义成color 场景：边框颜色与文字颜色相同...在线演示 使用:scrollbar改变滚动条样式 要点：通过scrollbar的scrollbar-track和scrollbar-thumb等属性来自定义滚动条样式 场景：主题化、页面滚动 兼容：:scrollbar...在线演示 使用box-shadow描绘单侧投影 要点：通过box-shadow生成投影，且模糊半径和负的扩张半径一致，使投影偏向一侧 场景：容器投影、背景补间动画1、背景补间动画2、立体投影、文字立体投影
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
