小编Cre*_*ane的帖子
方形渐变背景图像,角半径和透明度
我发现很难用文字描述我想要的效果,所以我在Photoshop中创建了它,你可以看到下面的图像:
如你所见,我有一个38像素边框的红色正方形.边界在外面,其风格设置为爆裂形状.但不幸的是,我认为CSS中没有类似的风格.然后将边框颜色设置为线性渐变,其中内部颜色与正方形相同,外部颜色设置为透明白色.不要注意下面的绿色只是为了显示边框的透明度.
我想知道的是,是否有任何方法可以通过CSS或jQueryUI来实现这种效果.
我一直在尝试这个JSFIDDLE,但我不知道如何让它更像一个正方形.
这是上面小提琴中使用的代码
<div class="test"></div>
.test {
width: 300px;
height: 300px;
border: 3px solid black;
background-image: -webkit-radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
background-image: -moz-radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
background-image: radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
推荐指数
解决办法
查看次数
查询给出#1305 - FUNCTION database-name.LEN不存在; 为什么？
EDIT3 MySQL小提琴在这里.我做了这个例子MySQL,你可以看到实际的问题.虽然我期望Jamie Foxx, Christoph Waltz在2 names结果中有更多.即使它的编写方式与它SQL正确返回名称的示例完全相同.:/
EDIT2 SQL小提琴在这里.这是一个更简单的版本,但逻辑就在那里.我需要让这个工作在MySQL小提琴中SQL.当我只SQL用LENGTH和替换函数并LOCATE用PhpMyAdmin测试它时,它返回actors列的整个内容,而不仅仅是前两个名称.我现在更加困惑,因为LOCATE它应该等同于CHARINDEX.
EDIT1*呵呵,我只是觉得,无论是LEN或CHARINDEX在存在MySQL.我想我可以代替LEN使用LENGTH,但我不知道该怎么办与CHARINDEX使用我试过LOCATE,但结果不正确,它给的全部内容actors领域.对此有何见解？
另一个跟进我以前的问题.这应该是它的结束.我有部分查询使用len函数在SQL Fiddle上工作,但是一旦我将它实现到我的实际数据库中的最终查询中,我得到的函数就不存在错误.列出以下我认为相关的所有内容
MySQL查询
SELECT
title,
director,
thumb,
LEFT(actors, LEN(actors) - CHARINDEX(', ', actors))AS '2 names'
FROM test
WHERE MATCH (title, director, actors) AGAINST ('arc*' IN BOOLEAN …推荐指数
解决办法
查看次数
包装物品之间的 Flex Row 空间
将任意数量的行与任意数量的项目设置为所有项目之间的边距的最动态方式是什么？现在唯一对我有用的是将每个项目包装在一个包装器中，将 flex 基础设置为包装器，将边距设置为子项。与此有关的问题是我无法使每一行与该行中最高的内容具有相同的高度。
情况 1：只有边距底部
https://jsfiddle.net/6oaney4e/6/
这很有效，因为内容保持每行最高项目的高度
html
<div class="wrapper">
<div class="item">
text
</div>
<div class="item">
text
<br>
line2
</div>
<div class="item">
text
</div>
<div class="item">
text
</div>
</div>
css
.wrapper{
display: flex;
flex-flow: row wrap;
margin: -10px;
padding: 10px;
background: green;
}
.item{
flex: 0 0 50%;
background: orange;
margin-bottom: 10px;
}
案例 2：四周边距
https://jsfiddle.net/6oaney4e/7/
出于某种原因，这里的行中断了，我猜这是因为该行无法容纳带有额外边距的项目。
html 与案例 1 相同
css
.wrapper{
display: flex;
flex-flow: row wrap;
margin: -10px;
padding: 10px;
background: green;
}
.item{
flex: 0 0 50%; …推荐指数
解决办法
查看次数
最新的 Google Chrome 版本打破了 CSS
更新到最新的 chrome 版本 (87.0.4280.66 (Official Build) (64-bit)) 后，带有边距底部的元素在高度为 100% 的父元素内时不再获得该边距。
你能告诉我这是否可以作为一个错误报告给谷歌，或者他们现在所做的是否应该是这样，所以其他所有浏览器基本上都有一个错误，而 Chrome 是唯一一个做对的？
HTML
<html>
<body>
<div>
test
</div>
</body>
</html>
CSS
body,
html {
height: 100%;
}
body {
background-color: red;
}
div {
background-color: white;
min-height: calc(100vh - 32px);
margin-bottom: 200px;
}
JS Fiddle 在这里：https : //jsfiddle.net/nez3aLqx/1/（在最新的 chrome vs firefox 中尝试）
预期结果（它在以前版本的 chrome 或我拥有的任何其他浏览器中的外观）：
实际结果：
推荐指数
解决办法
查看次数
自动居中 div 内的图标字体渲染根据浏览器宽度模糊/清晰
我想跳上图标字体火车，但很快就被渲染器推迟了。当图标位于具有百分比宽度或自动居中的 div 内时，该图标可能会对齐到半个像素，从而导致其呈现模糊。
我与 Icomoon 支持人员联系，他向我介绍了一个错误，说它是 Chrome 特定的。( https://bugs.chromium.org/p/chromium/issues/detail?id=426333 ) 不幸的是，我能够在所有主要浏览器中重现该问题。
我得到的建议是避免自动保证金并仅使用浮动左侧，这在当今世界是不可能的。即使我这样做，我仍然会与百分比宽度发生冲突。
题
有什么办法可以防止出现模糊？我想使用 inline-svgs 是一种选择，对吗？但这有点超出了 Icon Font 的全部目的。或者有一个脚本可以将所有内容四舍五入到整个像素，但这听起来也很极端。
重现问题的步骤
我在 Icomoon 上创建了一组 24px 的图标，下载了带有 demo.html 的图标集。然后我只是到演示的主要包装器，并给它一个固定宽度和边距 0 自动。然后通过调整浏览器宽度，我能够使图标模糊或清晰。
铬合金
模糊： 
酥脆： 
火狐
模糊： 
酥脆： 
歌剧
模糊： 
酥脆： 
边缘
模糊： 
酥脆： 
IE浏览器
模糊： 
酥脆： 
推荐指数
解决办法
查看次数
选择给定日期范围内的可用房间
我正在构建一个酒店预订系统，当我尝试进行查询以检索给定范围内的所有可用房间类型时，我陷入了困境。
我有两张桌子Rooms和Reservations。桌子Rooms上有酒店的房间。它们的数量 ( id) 和类型 ( type)。
表Reservations保存着客户的预订。预订编号 ( id)、关联的房间号 ( room_id) 和日期范围 (from和to)
我尝试过这个查询：
SELECT room_id as available_room_number, type
FROM roomstesting
LEFT JOIN reservations ON roomstesting.id = reservations.room_id
WHERE reservations.id
NOT IN (reservations.e_from <='"2014-03-07 19:00:00'
AND reservations.e_to >='2014-03-08 19:00:00')
我试图获取 3 月 7 日至 3 月 8 日范围内的所有可用房型。我希望得到modern room查询结果。因为modern room id 4没有与日期范围重叠的预订，并且所有其他3个房间都有3月6日至3月9日的预订。但我没有得到我想要的结果。下面是我的数据库的结构（简化）
客房
| id | type |
||||||||||||||||||||| …推荐指数
解决办法
查看次数
Lightbox2没有启动
好的,我认为需要几分钟才能完成的工作现在占用了我一个多小时的时间,我只是完全不解.
我按照说明下载了lightbox2 ; 将他们的CSS和JS嵌入我的index.html的头部
<link href="lightbox/lightbox.css" rel="stylesheet">
<script src="lightbox/lightbox-plus-jquery.js"></script>
我只在localhost上测试它,如果这有任何区别.路径设置正确100%,CSS所需的4个图像的路径也是如此.
现在,在我的身体中,我正在使用具有这样的data-lightbox属性的href
<a class="example-image-link" href="gallery/i1.jpg" data-lightbox="group" data-title="Optional caption.">
<img class="example-image" src="gallery/i1.jpg" alt="desc">
</a>
<a class="example-image-link" href="gallery/i2.jpg" data-lightbox="group" data-title="Optional caption.">
<img class="example-image" src="gallery/i2.jpg" alt="desc">
</a>
页面上没有其他内容,因此结果如下所示:
问题在于,当我单击其中一个图像时,弹出的图像只会在全屏选项卡中打开,而不是灯箱弹出.这就像灯箱根本不工作,它只是跟随a href图像..我甚至尝试了JSFiddle并加载了相同的CSS和JS作为外部资源,它正在做同样的事情.看看你自己 - > JSFIDDLE
我对任何想法持开放态度.真的不明白我错过了什么.
推荐指数
解决办法
查看次数
圆形CSS形状,带阴影和边框底部
更新所以我刚刚发现椭圆边界半径.实现了我所寻找的几乎相同的结果,但是边框随着省略号变粗,所以如果有人知道关于更好的方法,我仍然在寻找.这是我的JSfiddle - 结果看起来像这样
用于小提琴的代码
border-bottom: 3px solid green;
-moz-border-radius-bottomleft: 70% 40px;
-webkit-border-bottom-left-radius: 70% 40px;
-webkit-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.91) ;
box-shadow: 0 3px 7px 0 rgba(0,0,0,0.91) ;
原始邮政
我想知道是否有可能创建一个类似下面的形状
形状将重叠图像.我知道我可以创建一个recntagular DIV具有border-bottom-left-radius然后给它border-bottom: 3px solid green和drop-shadow,但边界半径并没有真正达到相同的"角"为一个以上的图像中..
我以为我会使用一个SVG,但是我不能有投影..所以如果有任何方法可以用投影创建这样的形状,我会对所有建议开放.谢谢
推荐指数
解决办法
查看次数
将日期转换为毫秒到目前为止
我遇到了一个奇怪的问题.我发送一个日期,我使用Javascript转换为毫秒到我的控制器.在那里,我将毫秒转换为PHP中的时间戳.它似乎得到了正确的日期部分,但时间完全没有了.谁能告诉我我错过了什么？代码如下.
JavaScript的
var d = new Date("13 October 2014 11:13:00");
document.write(d.getTime() + " milliseconds since 1970/01/01");
结果
1413191580000
PHP
echo date("Y-m-d H:i:s", 1413191580000/1000);
结果
2014-10-13 02:13:00
推荐指数
解决办法
查看次数