相关疑难解决方法(0)

我知道你可以用CSS3添加一个轮廓边框.

outline: 10px solid red;

现在我想知道如何在该轮廓边框上添加一个半径.

我试过这个,但不起作用:

.radius {
    padding: 20px 60px;
    text-transform: capitalize;

    -moz-outline: 10;
    outline: 10px solid red;

    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;    
}

我有一个带有阴影的按钮,使它看起来像是漂浮的,我想点击它时会产生一个紧迫的效果:

代码(CSS):

#startBtn
{
    font-family: OpenSans;
    color: #FFFFFF;
    background-color: #00FF7C;
    border: 1px solid #00FF7C;
    border-radius: 5px;
    box-shadow: 0px 5px 0px #00823F;
}

代码(HTML):

<input type="button" id="startBtn" value="Let's begin">

截图:

我看了W3学校网站W3Schools用CSS解释了样式按钮.我需要在单击时指定按钮样式.什么是伪类选择器？例如悬停按钮是:

.button:hover{ 
}

我想只用CSS缩放图像.下面的代码在按住鼠标左键的同时缩放图像,但我想用鼠标点击放大和缩小.我怎样才能做到这一点？

.container img {
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

.container img:active {
  -webkit-transform: scale(2);
  transform: scale(2);
  cursor: zoom-out;
}

是否可以在button点击时更改背景颜色; 整个document,只使用CSS和HTML5？

(例如:它在JavaScript中很简单)

我不确定现在这几天是否完全可以,但是我可以在点击没有javascript的按钮并使用css后更改页面视图吗？

我目前正在显示一个包含信息的页面,一旦用户单击编辑按钮 - 用户将能够在同一视图中进行更改,而不是转到其他页面.

这是页面向用户显示的方式: 显示的jsFiddle

<div>living the dream</div>
<hr/>
<div>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<div>Edit button</div>

这就是用户点击编辑按钮后页面的外观:编辑视图的jsFiddle

<div class="page" contenteditable>living the dream</div>
<hr/>
<div class="content" contenteditable>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

所以这些类将被隐藏,直到单击编辑按钮,然后它们将被添加到div

我可以用css完成这个,如果不是我的替代品而不是javascript？

我正在考虑 JavaScript 的替代方案，以防它被用户手动禁用，这样我就不会提示他们启用它，例如，我可以以某种方式模拟点击事件并更改，例如，背景颜色创建我自己的 :click 伪类，就像它适用于 :hover 一样。

这样的场景可能吗？是否有可能创建自己的 css 伪类？

我和我的同事在一个包含“常见问题”页面的网站上工作。每个问题之后，都有一个“ Answer”（Antwoord）扰流器按钮。单击按钮将在当前问题下方和下一个问题上方显示答案。再次单击按钮将隐藏答案。这样可以轻松滚动浏览所有问题列表，找到您可能感兴趣的问题。

现在我面临的问题是我想从问题1的答案链接到例如问题5的答案。

我可以给<div>包含问题5的id=属性提供一个链接到该属性的属性，但理想情况下，我想通过使超链接“单击”“答案”按钮来立即显示答案。

事实证明，为了使其能够正常工作，我将需要修改复选框hack，但是我面临一个问题，即我无法在一条文本上同时拥有超链接和标签。

明确一点：我正在寻找仅使用HTML / CSS 的解决方案。

我的原始代码只有一个扰流按钮

.spoilerbutton {
  display: block;
  border: none;
  padding: 0px 0px;
  margin: 10px 0px;
  font-size: 150%;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
  outline: 0;
}

.spoiler {
  overflow: hidden;
}

.spoiler>div {
  -webkit-transition: all 0s ease;
  -moz-transition: margin 0s ease;
  -o-transition: all 0s ease;
  transition: margin 0s ease;
}

.spoilerbutton[value="Antwoord"]+.spoiler>div {
  margin-top: -500%;
}

.spoilerbutton[value="Hide Antwoord"]+.spoiler {
  padding: 5px;
}

<strong>1. Question 1?</strong> <input class="spoilerbutton" …

我有两个input类型radio。每个input都有一个对应label的button内部。

我期望单击按钮与单击标签具有相同的效果：将检查相应的输入。

然而，这不会发生。如以下代码段所示，悬停并按下按钮确实会触发单选按钮中相应的样式更改，但即使简单标签按预期工作，单击操作也不会选择输入。

我已经检查过buttons 是 s 的合法孩子label。标签允许短语内容，按钮是短语内容，所以一切都应该没问题。

我还尝试向两个按钮的单击事件添加一个事件侦听器，并在其中调用event.preventDefault()，只是为了确保按钮的默认行为不会阻止事件冒泡到标签，但无济于事，标签正在接收事件。

由于这在浏览器之间似乎是一致的（在 Firefox 41a 和 Opera 31b / Chrome 44 上测试）：

1. 我失踪了这里发生了什么？
2. 如何在没有技巧的情况下实现这一点（例如将标签设置为按钮的样式）？

<div>
  <input type="radio" name="A" id="one" />
  <label for="one">One</label>
  <label for="one">
    <button type="button">One</button>
  </label>

  <input type="radio" name="A" id="two" />
  <label for="two">Two</label>
  <label for="two">
    <button type="button">Two</button>
  </label>
</div>

在我的代码中，我只想在宽度变宽时使用过渡。当宽度减小时我不需要任何动画。我可以只使用 CSS 吗？添加/删除课程对我来说不是一个选项。

function changeCss() {
  document.getElementById('squareId').style.width = "300px";
}

function reset() {
  document.getElementById('squareId').style.width = "100px";
}

.square {
  background-color: red;
  width: 100px;
  height: 100px;
  transition: width 1s linear;
}

<div id="squareId" class="square"></div>

<button onclick="changeCss()">increase</button>
<button onclick="reset()">decrease</button>

JSFiddle