CSS边框RADIUS,哪种样式才是正确的? border | radius? | webkit | border | radius? | moz | border | radius?
我想使用 CSS 来创建漂亮的圆形边框.我知道以下 CSS 样式: border-radius -webkit-border-radius -moz-border-radius 哪种风格最好用? 解决方案 /* Gecko browsers */ -moz-border-radius: 5px; /* Webkit browsers */ -webkit-border-radius: 5px; /* W3C syntax - likely to be standard so use for future proofing */ border-radius: 5px; Internet Explorer 6 和7 和 8(据我所知)和 Opera 不支持圆角.相反,这些用户会看到一个常规角落. 您可以开始使用 Firefox 和任何“Mozilla"系列浏览器.Apple 的 WebKit 网络浏览器引擎还支持圆角,使其在 Safari 和 Chrome 网络
294 2022-07-19
编程技术问答社区
为什么在Firefox中,百分比padding/margin对flex项目不起作用?
我想在 flexbox 中有一个方形 div.所以我使用: .outer { display: flex; width: 100%; background: blue; } .inner { width: 50%; background: yellow; padding-bottom: 50%; } hehe 这在 Chrome 中运行良好.但在 Firefox 中,父级只压缩到一行. 如何在 Firefox 中解决这个问题?我使用的是 44 版. 您也可以在 https://jsbin.com/lakoxi/edit?html 查看代码,css 解决方案 来自 flexbox 规范: 作者应完全避免在弹性项目的填充或边距中使用百分比,因为它们会在不同的浏览器中得到不
264 2022-07-19
编程技术问答社区
在Firefox和IE11中,绝对定位的柔性项目没有从正常流程中移除
我们有两个带有内容的 div 和第三个带有绝对位置的背景的 div. 容器是一个弹性盒子. 在 Chrome 和 Safari 中一切正常,但 Firefox 和 IE11 计算绝对定位的 div,并在 div 之间分配空间,就像连续 3 个 div 一样. 我制作了 jsfiddle 示例.有没有办法修复这个错误?https://jsfiddle.net/s18do03e/2/ div.container { display: flex; flex-direction: row; width: 100%; height: 300px; justify-content: space-between; width: 100%; outline: 1px solid; } div.c1 { background: #aaeecc; width: 100px; position: relative;
222 2022-07-19
编程技术问答社区
css3 - css flex 子元素居中
明显黄色小标标没有在中间 .box1 { display: flex; width: 300px; height:300px; background: #dedede; border-radius: 5px; padding: 10px; margin: 10px; } .item1 { width: 50px; height: 50px; background: orange; border-radius: 3px; } .item1:nth-child(2) { align-self: center; }
154 2022-07-19
编程技术问答社区
css - html 有序列表ol 左边如何做到所有设备对齐?
如上图,代码结构如下 每天打卡时间2小时内打卡为连续天数 21天内中断继续完成剩余天数,也算完成一个活动周期,但不算完成一个连续周期。 参加活动即有机会赢取自拍神器、手机话费等好礼! 如何吧左边序号包含在区域内? 最兼容的做法是什么?
246 2022-07-19
编程技术问答社区
javascript - 這種版型要怎麼做?
想問問這種版型要怎麼做呢 就是左邊一個區塊 右邊也是一個滿版的區塊 能夠隨螢幕大小自行變化(但左邊區塊不變) 補上我自己的程式碼 .div_left { background-color:#2E3C54; width:12%; height:100vh; display:inline-block; } .div_right { background-color:#eee; width:80%; height:100vh; display:inline-block; } 完全不對...
68 2022-07-19
编程技术问答社区
css - google santa 網站設計問題
问 题 https://santatracker.google.c... 想問一下谷歌聖誕老人網站的做法? 他的背景不會隨著瀏覽器放大或縮小 當在1920x1080環境下瀏覽 跟筆電size大小下瀏覽 他能夠達成定位的行為 這該怎麼做到?? 我現在卡在這裡 定位... 解决方案 以解決。以解決。以解決。
134 2022-07-19
编程技术问答社区
html5 - 这种动效是如何做出来的?
近年看了很多这种动效,感觉用于web或软件上都是非常赞的效果.事实上,诸如UC之类的安装效果现在都是这样的动效开场. 那么,它们一般是如何实现的呢?前端很多人说用AE,难道没有更简便的方法吗? 假如AE的话,达成这样的效果对小白而言需要多久?
342 2022-07-19
编程技术问答社区
css3 - css小三角定位
文字 .triangle-down { width: 0; height: 0; border-left: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-top: 0.6rem solid darkgray; } 怎么把小三角的位置调整到文字后面
116 2022-07-19
编程技术问答社区
css - DIV 讓數字水平垂直置中?
.unsolve { position: absolute; right: 10px; top:50%; transform: translate(0,-50%); z-index: 1; font-size: 13px; background-color: red; border-radius: 50%; color:#fff; width: 15px; height: 15px; padding: 5px; text-align: center; } 12 這樣設定的時候,數字都會中間偏下,沒辦法完全中間。 請問該怎麼讓他完全水平垂直置中?
166 2022-07-19
编程技术问答社区
当我用电脑和iPhone看时,我怎样才能使宽度达到100%呢?
我的布局中有一张桌子.我也在使用 bootstrap 的响应式设计. 我想知道如何根据我正在使用的设备扩展其宽度. 例如,在我的电脑上,我的网站通常以大约 1200 像素的宽度显示. 在我的 iPhone 上,我的网站通常以大约 640 像素的分辨率显示. 我想尽可能地扩大气泡的宽度(我的意思是 100% 宽度)气泡的宽度应该是灵活的.缩小窗口的宽度应使其自动调整大小. 我该怎么办? 演示 http://jsfiddle.net/8ASj4/ HTML Body 01-10 03:29:Per
144 2022-07-19
编程技术问答社区
透明背景的Webkit模糊
在 CSS3 中,我可以很容易地用这个来模糊任何东西: -webkit-filter: blur(5px); -moz-filter: ... 现在,我正在尝试在文本顶部创建一个可拖动的圆圈,以便该圆圈区域内的任何内容都将被模糊: position:absolute; -webkit-filter: blur(3px); background: rgba(255, 255, 255, .3); 这在技术上应该可行,但这是我所看到的: 看起来有bug,最重要的是半透明圆圈内的文字没有模糊.有没有办法用 CSS 或 JavaScript 修复它? 示例:http://jsfiddle.net/hSpHd/ 解决方案 问题是不支持屏蔽过滤器.也就是说,过滤器应用于所有元素.此限制的一种解决方法是拥有 2 个元素,将过滤器应用于一个元素,并将其屏蔽为透明度.然后您将显示第二个(相同的)元素,未过滤. CSS 将是: #one, #two { pos
212 2022-07-19
编程技术问答社区
悬停在菜单下拉菜单上 | 如何使悬停效果不消失?
我的菜单及其悬停效果存在严重问题. 我有一个非常基本的菜单,其中有一个子菜单: Menu1 Menu2 SubMenu1 SubMenu2 Menu3 这是我正在使用的 CSS: #menu li { display: inline; } #menu li a { padding: 10px; } #menu li a:hover { background: #000; } #menu ul ul { display: none; } #menu ul li:hover > ul { display: blo
1006 2022-07-19
编程技术问答社区
同一行中的两个div,其中一个div中的文本根据第二个div的宽度被剪切。
我想在一行中有两个div,左div的文本基于右div的宽度(div中的文本是动态生成的)被裁剪,因此我们不能固定这些div的宽度右div必须完全可见,而左div中的文本可以剪切)。此图显示了示例输出: 这里是小提琴: http://jsfiddle.net/UzqLZ/1/ 这里是代码的html部分: 此文本必须隐藏,如果它是溢出 88818888.333346 有人可以帮我。 您需要在文本周围添加一个内部包装元素,如下所示: 如果 溢出,则此文本必须被隐藏
130 2022-07-19
编程技术问答社区
清除掉:target CSS伪装类
最近我一直在制作 Shower HTML5+CSS3 演示模板,以制作即将发布的演示文稿.Shower 使用 CSS :target 伪类 可以轻松识别当前幻灯片幻灯片概览. 我了解 :target 如何通过 URL 中的哈希工作,但是我无法让它从所有元素中清除 :target CSS. 所以我的问题是:考虑到元素被 :target 编辑后,我们如何清除所有 :target 并使用 JavaScript 将其恢复为规范?History API 的使用似乎不起作用. 解决方案 我之前尝试过以下两种说法,但没有成功(至少在 Firefox 上): history.pushState({}, 'null', window.location.pathname); window.location.href.substr(0, window.location.href.indexOf('#')); 诀窍是改用这个: window.location.hash = '';
140 2022-07-19
编程技术问答社区
CSS只在悬停时改变一个单独的div的颜色,即使不是嵌套的或同级的?
我有两个 div: Change Color Change My Color 我有两个问题: 当我将鼠标悬停在“#changecolor"上时,如何仅使用 CSS 来改变 #tobechanged 的背景颜色? 有没有办法只使用 CSS3,这样点击“changecolor"会触发 CSS 颜色更改而不是悬停? 以下是我尝试过的: #changecolor:hover + #tobechanged { background:yellow; } 只有当我有这样的东西时这才有效: Change Color Change My Color 但我不想让“tobechan
200 2022-07-19
编程技术问答社区