Tag: css3

如何获得具有CSS3转换元素的MouseEvent坐标？: 我想检测一个MouseEvent发生在相对于被点击元素的坐标中。为什么？因为我想在点击的位置添加一个绝对定位的子元素。我知道如何检测不存在CSS3转换（请参阅下面的说明）。但是，当我添加一个CSS3变换，然后我的algorithm中断，我不知道如何解决它。我没有使用任何JavaScript库，我想了解如何在普通的JavaScript中工作。所以，请不要用“只用jQuery”来回答。顺便说一句，我想要一个适用于所有MouseEvent的解决scheme，而不仅仅是“点击”。这并不重要，因为我相信所有的鼠标事件都具有相同的属性，因此相同的解决scheme应该适用于所有的鼠标事件。背景信息根据DOM Level 2规范， MouseEvent几乎没有与获取事件坐标相关的属性： screenX和screenY返回屏幕坐标（原点是用户显示器的左上angular） clientX和clientY返回相对于文档视口的坐标。因此，为了findMouseEvent相对于单击的元素内容的位置，我必须做这个math： ev.clientX – this.getBoundingClientRect().left – this.clientLeft + this.scrollLeft ev.clientX是相对于文档视口的坐标 this.getBoundingClientRect().left是元素相对于文档视口的位置 this.clientLeft是元素边界和内部坐标之间的边界（和滚动条）的数量 this.scrollLeft是元素内滚动的数量 getBoundingClientRect() ， clientLeft和scrollLeft在CSSOM视图模块中指定。没有CSS变换的实验（它的工作原理）混乱？尝试下面的一段JavaScript和HTML 。点击后，一个红点应该出现在点击发生的地方。这个版本“非常简单”，并按预期工作。 function click_handler(ev) { var rect = this.getBoundingClientRect(); var left = ev.clientX – rect.left – this.clientLeft + […]

拖动和调整CSS转换的元素的大小: 例如，如果我们设置了一个-vendor-transform: rotate(40deg)在矩形<div>上-vendor-transform: rotate(40deg) css属性，所有突然的拖动和resize变得非常奇怪和有缺陷。下面是一个简单的jQueryUI示例： http : //jsfiddle.net/Ja4dY/1/ 您会注意到，如果在转换时拖动或调整矩形的大小，它将跳起或向下跳动，光标将不会保留在正确的位置。在我真正的代码我使用自定义代码的大小和拖动，但是我遇到了同样的问题。那么，“问题”当然是一个元素的方向将会改变。所以左边可以是正确的，顶部底部和中间和Javascript代码仍然处理每个方向，因为它不会被转换。所以，问题是：我们如何补偿变形 / 旋转元素？任何好的资源/书籍/博客也是非常受欢迎的。

内联元素不能使用CSS转换: 我想在字WEBLOG反映字母E ，所以我使用CSS转换属性，但它不起作用，如果我把文本包在一个范围内，但它工作，如果我assing display: inline-block; 或display: block; 所以变换不适用于内联元素？示例1 （不能转换） <h1>W<span>E</span>BLOG</h1> h1 span { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ } 示例2 （Works，如果使用display: block OR display: inline-block ）

之前和之前有什么区别？: 我刚刚看到一个包含::before标签的CSS代码。我看着MDN看看::before是什么，但是我真的不明白这一点。有人可以解释它是如何工作的？它在我们用CSSselect之前是否创build了一个DOM元素？

在html中定位固定标题: 我有一个固定位置的标题（dynamic高度）。我需要将容器div放在标题下方。由于标题高度是dynamic的，所以我不能使用顶部边距的固定值。如何才能做到这一点？这是我的CSS： #header-wrap { position: fixed; height: auto; width: 100%; z-index: 100 } #container{ /*Need to write css to start this div below the fixed header without mentioning top margin/paading*/ } …和HTML： <div id="header-wrap"> <div id="header"> <div id="menu"> <ul> <li><a href="#" class="active">test 0</a></li> <li><a href="#">Give Me <br />test</a></li> <li><a href="#">My <br />test […]

仅限顶部，左侧和右侧的CSS3 Box阴影: 问候，我正在尝试将一个CSS3盒子阴影应用于DIV的顶部，右侧和左侧，其半径与以下CSS的结果相匹配（减去底部阴影） #div { -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; } 什么是最好的方法来完成这个？谢谢！更新这个阴影将被应用到页面上的导航栏，该栏位于主容器DIV的顶部。我试图完成的是继续主DIV的盒子阴影到导航栏，它位于上面，但没有导航栏上的底部阴影。看看网站本身，看看我在说什么，比在这里添加所有的HTML和CSS更容易。更新2由于我正在使用的DIV是单数，而不是试图在每个导航里面放一个阴影，我select将其更改为以下内容： -webkit-box-shadow: 0px -4px 7px #e6e6e6; -moz-box-shadow: 0px -4px 7px #e6e6e6; box-shadow: 0px -4px 7px #e6e6e6; 这使阴影的顶部非常明显，但这是我想要完成的 – 如果有人知道一种方法来保持阴影在容器DIV外观相同，请让我知道。谢谢！

我怎样才能使覆盖层的CSS玻璃/模糊效果工作？: 我无法在半透明的叠加div上应用模糊效果。我希望div背后的一切都被模糊，像这样：这是一个不工作的jsfiddle： http : //jsfiddle.net/u2y2091z/ 任何想法如何使这项工作？我想保持这个尽可能简单，并使其跨浏览器。这是我正在使用的CSS： #overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); }

如何使用cssselect第一个2 <li>元素: 嗨，我想申请CSS前2个元素（一，两个）是相邻的第一个<p>元素。 <div class="one"> <ul> <p> <li>One</li> <li>Two</li> <p> <li>Four</li> <li>Five</li> </ul> </div> 适用于所有4 li元素 .one ul p:nth-child(odd) ~ li { background: lightsteelblue; }

如何随机锯齿得到撕纸效果？: 我正在试图制作一个像下面的图片一样的撕纸效果：与底部的撕裂的效果。我看到了这一点，并能够做出如下所示的撕纸效果 .box { width: 300px; height: 150px; background: darkred; position: relative; display: inline-block; } .box:after { position: absolute; content: ""; width: 15px; height: 15px; transform: rotate(45deg); transform-origin: 0% 100%; background: darkred; left: 0; bottom: 0; box-shadow: 15px -15px 0 0 darkred, 30px -30px 0 0 darkred, 45px -45px 0 0 darkred, 60px […]

有没有可能用CSS创build这个形状（两个部分圆形连接在一起）？: 我试图用CSS来完成两个div的边界：我尝试使用border-radius ，但两个部分圆不会压在一起： http : //jsfiddle.net/uwz6L79w/ .left { position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-width: 4px; border-color: black white black black; border-style: solid; border-radius: 60px } .right { position: absolute; left: 104px; top: 0; width: 100px; height: 100px; border-width: 4px; border-color: black black black white; border-style: solid; border-radius: 60px; } <div […]