小编Gil*_*mbo的帖子

我有一个看起来像橙色方块的div

我想以某种方式在这个div中绘制一个白色的X,这样它看起来更像

无论如何要在CSS中执行此操作还是更容易在Photoshop中绘制并使用图像作为div背景？div代码看起来像

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}

我试图将此SVG代码的背景更改为透明而没有成功.我是SVG的新手,不知怎的,我无法在谷歌找到解决方案; 任何人都可以帮忙吗？

演示:http://jsfiddle.net/kougiland/SzfSJ/1/

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
    <rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" />
    <circle cx="0" cy="50" r="15" fill="blue" stroke="transparent" stroke-width="1">
       <animateMotion 
       path="M 0 0 H 300 Z" 
       dur="3s" 
       repeatCount="indefinite" 
       />
    </circle>

    <circle id="rotatingBall" cx="0" cy="50" r="15" fill="green" stroke="transparent" stroke-width="1" opacity="0.8"></circle>
    <animateTransform
        xlink:href="#rotatingBall"
        attributeName="transform"
        begin="0s"
        dur="2s"
        type="rotate"
        from="0 20 20"
        to="360 100 60"
        repeatCount="indefinite" 
        />
</svg>

我该怎么解决这个问题:

"Android Studio"无法打开,因为它来自一位身份不明的开发者.

有没有办法链接HTML5 classList API链接？

这不行

var sidebar = document.querySelector("#sidebar");

sidebar.classList.toggle("active").classList.remove("hover")

虽然这会奏效

var sidebar = document.querySelector("#sidebar");

sidebar.classList.toggle("active"); 
sidebar.classList.remove("hover")

注意:请不要jquery

我正试图在一个倾斜的div上创建一个局部阴影,尽可能接近这个创意.

现在我一直试图用伪元素(特别是之前)做这个,但我发现每当我扭曲它们应用的元素时,这些元素表现得很奇怪.即使z-index设置为-1,伪元素也会一直显示在div的顶部.无论我对z-index做什么,它都将保持在它之上.我希望它在它应用的div后面,并在下面的div前面,就像在广告中一样.

这是我的:: before代码和codepen的链接

CSS

/*! Shadows */
#test-title {
  position: relative;
}

#test-title:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

http://codepen.io/kathryncrawford/pen/WwWEma

使用momentjs将小时分钟转换为小数时间的最佳方法是什么

假设我有1:30分钟,我希望转换后有1.5

这是我尝试过的

console.log(travelTime().split(':')[0]);   return 1
console.log(travelTime().split(':')[1]);   return 30  then / 30

travelTime()=="1:30"

我正在玩伪元素和javascript,但有些我不能用javascript来设置它.

    var div = document.querySelector(":before");
    div.style["display"] ="none";

div{
    width:200px;
    height:200px;
    background:red;
    position:relative;
}

div:before{
    position:absolute;
    content:'';
    top:0;
    right:-100px;
    width:100px;
    height:100%;
    background:green;
}

<div></div>

有谁知道为什么这不起作用？

Durandal:如果可能的话,在Viewmodels之间传递数据(参数)的正确方法是什么(不处理后端).

假设我有2个视图概述和详细信息我希望用户点击列表元素从概述中 获取该元素的ID并将其传递给详细信息 Viewmodel以便我可以开始使用该ID.

感谢您的帮助

我正在研究一个纯CSS汉堡菜单图标,到目前为止它工作得很好,除了线之间的间隙不可点击.如何修改此代码,以便整个按钮可以单击而不仅仅是线条？

<a href="#" title="Open Menu" class="menu"></a>

.menu {
    width:30px;
    height:5px;
    background-color:#000;
    position:relative;
    display:inline-block;
}
    .menu:after, .menu:before {
        content: '';
        width: 100%;
        height:5px;
        background-color:#000;
        position:absolute;
    }
    .menu:after {
        top:10px;
        left:0;
    }
    .menu:before {
        top:20px;
        left:0;
    }

这是一个JSFiddle.

谢谢!

有没有办法在@supports(propertyName,value)中使用calc函数？我的意思是只在calc函数的位置.<supports_condition>

@supports ( <supports_condition> ) {
    .col-3 {
    width: calc(25% - 20px/4)
    }
    .col-4 {
        width: calc(33.3333333% - 20px/3)
    }
    .col-6 {
        width: calc(50% - 20px/2)
    }
}